Datasources getting cross updated MVVM templating?

2 posts, 1 answers
  1. Todd
    Todd avatar
    5 posts
    Member since:
    Jan 2016

    Posted 03 Oct 2016 Link to this post

    It seems that even though the internally created object should be getting a new datasource it is being shared across objects. It is kind of a hard behavior to explain so here is the code. I assume that I am doing something wrong but I don't really know what is expected since I can't seem to find a good example of complex MVVM models with differing datasources... I can use an array and that works fine but if I change it to observable array or a data source I get an unexpected result. So like I said I am probably doing it wrong?

    Here is an example of the behavior that I am seeing.

    <div id="example">  
        <div >     
         <button data-bind="events{click:addItem}">add</button>
         <ul data-template="item-template" data-bind="source: items" data-value-update="onChange"></ul>
      <script id="item-template" type="text/x-kendo-template">
          <button data-bind="events{click:addSubItem}">add</button>
          <label  data-bind="text: name"></label>
          <ul data-template="sub-item-template" data-bind="source: subItems" data-value-update="onChange"></ul>
      <script id="sub-item-template" type="text/x-kendo-template">
        <li><label  data-bind="text: name"></label></li>
            $(document).ready(function() {
                var mySubClass = kendo.Class.extend({
                name: ''
                var myClass = kendo.Class.extend({
                  init: function(){},   
                  name: 'ParentItem',
             subItems: new{data:[]}),
                  addSubItem: function(){
                    var item = new mySubClass();
           = 'item: ' + ( + 1);
                var viewModel = kendo.observable({
                   items: new{data: [new myClass()]}),
                   addItem: function(){ this.items.add(new myClass());}
                kendo.bind($("#example"), viewModel);

  2. Answer
    Stefan avatar
    1147 posts

    Posted 05 Oct 2016 Link to this post

    Hello Todd,

    I can assume that the undesired result occurs because the items which are not created in the constructor are shared between all of the instances of this class.

    I can suggest creating the DataSource in the constructor in order to ensure that every new item will have a separate DataSource: 

    I hope this will help to achieve the desired result.

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top