MVVM with array bound to list misbehaves if you try to change the array with .set()

[Alex Smith]

I've created a sample application to illustrate the behavior here: http://trykendoui.telerik.com/ixuz

The gist of my problem is this:
If I have a string property on a model I can call model.set("property", "some value") and the view will be updated with the change.
If I have an array property on a model and call model.set("array", []) the view and the model become disconnected and no changes to the model will be reflected in the view.

In the sample application if you click the Add button next to the "List Items" heading you'll see new items added. This is done by calling model.items.push({...}).
If you click on the Reset button the code invokes a model.set("items", []) and the view is stuck in the current state. No more changes occur, though you can observe that model.items is changing by checking it's state from the console.

In contrast, if you click the Change button next to the "String Property" heading the code will invoke a model.set("property", "...") which does update the view correctly.

What is the proper way to re-initialize array members on an MVVM model?

[Petyo]

Hi Alex,

the problem in the sample in question is in the data-source specification. Changing it in the following way resolves the problem. In a nutshell, the fact that you re-assign the model.items does not update the other references to the respective array. The following sample is a rough equivalent of what happens:

var foo = {
   a: [ 1 ]
}

var b = foo.a;

foo.a = [ 2 ];

console.log(b) // [ 1 ];

Regards,
Petyo
Telerik