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

2 posts, 0 answers
  1. Alex Smith
    Alex Smith avatar
    17 posts
    Member since:
    Dec 2009

    Posted 02 Jul 2014 Link to this post

    I've created a sample application to illustrate the behavior here:

    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?
  2. Petyo
    Petyo avatar
    2437 posts

    Posted 04 Jul 2014 Link to this post

    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 ];

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top