Datasources getting cross updated MVVM templating?

[Todd]

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>
    </div>
</div>
  <script id="item-template" type="text/x-kendo-template">
    <li>
      <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>
    </li>
  </script>
  <script id="sub-item-template" type="text/x-kendo-template">
    <li><label  data-bind="text: name"></label></li>
  </script>
    <script>
        $(document).ready(function() {
            var mySubClass = kendo.Class.extend({
                init:function(){},
            name: ''
            });
            var myClass = kendo.Class.extend({
              init: function(){},
              name: 'ParentItem',
         subItems: new kendo.data.DataSource({data:[]}),
              addSubItem: function(){
                var item = new mySubClass();
                item.name = 'item: ' + (this.subItems.data().length + 1);
                this.subItems.add(item);
              }
            });
            var viewModel = kendo.observable({
               items: new kendo.data.DataSource({data: [new myClass()]}),
               addItem: function(){ this.items.add(new myClass());}
            });

            kendo.bind($("#example"), viewModel);
        });
    </script>

[Stefan]

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:

http://dojo.telerik.com/ITalO 

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress