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

Change Event not firing from splicing nested ObservableArray

3 Answers 56 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Stacey
Top achievements
Rank 1
Stacey asked on 13 Nov 2013, 05:43 PM
Using the following code, splicing the ObservableArray does not seem to appropriately fire the change event.
kendo.data.ObservableArray.prototype.remove = function (value) {
     var array = this;
 
     $.each(array, function (idx, item) {
         if (item !== undefined) {
             if (value.data.uid === item.uid) {
                 array.splice(idx, 1);
                 return true;
             }
         }
     });
 }
Now I call it like this, within the view model.

onRemove: function (e) {
    e.data.parent().remove(e);
}
Where this function is on a nested child, so an array like this ...

{
    Name: "Top Level",
    Collection: [
      {
        Name: "First Child",
        SubCollection: [
          {
            Name: "First Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          },
          {
            Name: "Second Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          }
        ]
      },
      {
        Name: "Second Child",
        SubCollection: [
          {
            Name: "Third Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          },
          {
            Name: "Fourth Sub Child",
            onRemove: function (e) {
                e.data.parent().remove(e);
            }
          }
        }
    ]
}
Using this templating...
<div data-role="listview"
     data-template="tmpl-demo-first-child"
     data-bind="source: Collection"></div>
<script type="text/html" id="tmpl-demo-first-child">
    <div>
         
        <h2 data-bind="text: Name"></h2>
        <div
             data-role="listView"
             data-template="tmpl-demo-sub-children"
             data-bind="source: SubCollection"></div>
    </div>
</script>
<script type="text/html" id="tmpl-demo-sub-children">
    <div>
        <div
             style="width: 120px;
                    float: left;
                    text-align: center;
                    font-size: 1.6em;
                    vertical-align: middle;"
            data-bind="text: Name, click: onRemove">
        </div>
    </div>
</script>
Using this setup, when I click on the sub child, with the intention to use its OnRemove function to remove it from its parent, it does update the actual view model, which is apparent because I can have the view model in a pane to the side with its change event subscribed, printing out the JSON. But the actual
HTML doesn't update, because the item does not vanish from the DOM.

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 15 Nov 2013, 09:48 AM
Hi Stacey,

this seems strange. I tried to reproduce the problem in this jsbin, and the remove function seems to work as expected. Am I missing something?

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stacey
Top achievements
Rank 1
answered on 15 Nov 2013, 07:06 PM
I am sorry, the jsbin you linked me - the remove function does not work in any browser. 
0
Petyo
Telerik team
answered on 19 Nov 2013, 08:15 AM
Hello Stacey,

I am sorry for misleading you, it looks like I posted the wrong example. Please check this one. I test by clicking the child items - they disappear, as expected.

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Stacey
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Stacey
Top achievements
Rank 1
Share this question
or