Data binding within template

4 posts, 0 answers
  1. Chris
    Chris avatar
    2 posts
    Member since:
    Sep 2012

    Posted 21 Nov 2012 Link to this post

    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?



  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 22 Nov 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Justin
    Justin avatar
    4 posts
    Member since:
    Aug 2013

    Posted 19 Aug 2013 Link to this post

    How do you do this with a remote dataSource?  Does this only work with a localDataSource?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Aug 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready