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

Datasources getting cross updated MVVM templating?

1 Answer 10 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 03 Oct 2016, 09:03 PM

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>
 
  

1 Answer, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 05 Oct 2016, 02:17 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Data Source
Asked by
Todd
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or