Using the following code, splicing the ObservableArray does not seem to appropriately fire the change event.
Now I call it like this, within the view model.
Where this function is on a nested child, so an array like this ...
Using this templating...
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.
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;
}
}
});
}
onRemove: function (e) {
e.data.parent().remove(e);
}
{
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);
}
}
}
]
}
<
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
>
HTML doesn't update, because the item does not vanish from the DOM.