Data binding within template

[Chris]

Suppose I've got an array of items, and I'd like to edit an attribute of each of those items.  So I create a div, bind my array of items to it, and then specify a template to use to render each item using the data-bind attribute to bind the value of my item an input box.

e.g. (this is derived from another example I found in a separate thread), 

<div id="example" data-template="template" data-bind="source: arr"></div>

<script id="template" type="text/x-kendo-template">
    <div> Age: ${age}</div>
    <input type="text" data-bind="value: age"/>
</script>​

and 

var arr = new kendo.data.ObservableArray([
    { name: "John Doe", age: 23 }, 
    { name: "Jane Doe", age: 34 }
]);

var viewModel = kendo.observable({
    arr: arr 
});

kendo.bind($("#example"), viewModel);

setTimeout(function() {
    viewModel.arr[1].set('age',54);
}, 2000);
​
From this example, I'd expect to see the first div and text box with values of 23, and the second div and text box with values of 34.  Instead I get the first div with 23 and the first text box with 34, and the second div with 34 and the second text box empty.  Then when the function specified in setTimeout runs, it changes the value in the first text box, instead of the second one.

Here's a JSFiddle where you can try it:  http://jsfiddle.net/2R3tF/

Seems simple to me, but I must not be understanding the plumbing enough to figure out why this doesn't work.  Can someone explain, and ideally provide a version that works?

[Petyo]

Hi Chris,

You need a single root element in the template - check the updated example. 

Regards,
Petyo
the Telerik team

[Justin]

How do you do this with a remote dataSource?  Does this only work with a localDataSource?

[Alexander Valchev]

Hello Justin,

Source and template binding works out of the box with Observable Array source.

Making this to work with DataSource instance requires a little different approach. Please check the following example:

• http://jsbin.com/AYUL/2/edit
  
  

Important part is:

change: function(e) {
    viewModel.set("view", this.view());
}

Regards,
Alexander Valchev
Telerik

[Jesse]

What is the ${age} syntax that was used here? Is that an older version that has since been replaced by  #= age #? ${age} is much easier to read.

[Dimitar]

Hello Jesse,

The dollar sign and curly braces (${expression}) are standard placeholders that could be nested in templates. Refer to the following article on MDN for additional details:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Regards,
Dimitar
Progress Telerik