This is a migrated thread and some comments may be shown as answers.

Data binding within template

5 Answers 1423 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 21 Nov 2012, 06:12 PM
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">
    <divAge: ${age}</div>
    <input type="text" data-bind="value: age"/>
</script>

and 

var arr new kendo.data.ObservableArray([
    name"John Doe"age23 }
    name"Jane Doe"age34 }
]);

var viewModel kendo.observable({
    arrarr 
});

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?



5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 22 Nov 2012, 02:54 PM
Hi Chris,

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

Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Justin
Top achievements
Rank 1
answered on 19 Aug 2013, 06:41 PM
How do you do this with a remote dataSource?  Does this only work with a localDataSource?
0
Alexander Valchev
Telerik team
answered on 22 Aug 2013, 07:40 AM
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:
Important part is:
change: function(e) {
    viewModel.set("view", this.view());
}


Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jesse
Top achievements
Rank 1
Veteran
answered on 03 Jul 2019, 01:43 AM
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.
0
Dimitar
Telerik team
answered on 05 Jul 2019, 09:54 AM
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:


Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Templates
Asked by
Chris
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Justin
Top achievements
Rank 1
Alexander Valchev
Telerik team
Jesse
Top achievements
Rank 1
Veteran
Dimitar
Telerik team
Share this question
or