Kendo, basic template binding

Question

Maybe I misunderstood the documentation but I thought I could do this and apparently I can't ...

http://jsfiddle.net/dh2b835m/1/

<script id="editor" type="text/x-kendo-template">
    <h2>Object Id: #: data.id #</h2>
</script>

<div id="component" 
     data-bind="source: model" 
     data-template="editor" 
/>

<script>
   $(function() {
     var model = new kendo.observable({ id: 'test' });
     var component = $("#component");
     kendo.bind(component, model);
   });
</script>

What am I missing here?

Answer 1

Ok turns out the documentation has no mention of this but you're supposed to use this when binding the root in this way ...

<div id="component" 
     data-bind="source: this" 
     data-template="editor" 
/>

All that did (after solving this question) was raise a load more questions ... great!

Answer 2

your data-bind="source: model" needs an element model in the model

also in the template the data.id may loose the data.

see the edited jsfiddle

see this kendo documentation