MVVM set not triggering template update

7 posts, 0 answers
  1. Greg
    Greg avatar
    9 posts
    Member since:
    Oct 2014

    Posted 26 Feb 2015 Link to this post

    Using set within a viewModel to change a nested variable is not triggering a change to a dependent template.  A work-around of getting the entire variable, converting with toJSON, making the change and then using set, works fine.   Attached is a small app demonstrating the problem.  The "Add Participant" href is not set properly.
  2. Greg
    Greg avatar
    9 posts
    Member since:
    Oct 2014

    Posted 26 Feb 2015 in reply to Greg Link to this post

    Sorry for the repost, but I got a message that the initial post failed.
  3. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Mar 2015 Link to this post

    Hello Greg,

    This could be achieved either by setting the entire event object or by manually triggering the change event. For example: 
    self.set('event', {id: id, desc: "Ski Martock, March 2nd, 2015"});
    self.set('event.id', id);
    self.set('event.desc', 'Ski Martock, March 2nd, 2015');
    self.trigger("change");

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Greg
    Greg avatar
    9 posts
    Member since:
    Oct 2014

    Posted 02 Mar 2015 in reply to Alexander Popov Link to this post

    OK, thank you.

    Why do I need to do that when normally setting an mvvm variable triggers the change automatically?
    Shouldn't this.set be doing the triggering?
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 04 Mar 2015 Link to this post

    Hi Greg,

    Indeed, using the set method should trigger the change event. I actually tried reproducing this here, using the latest Kendo UI version and it seems to be working as expected without any workarounds. 

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Greg
    Greg avatar
    9 posts
    Member since:
    Oct 2014

    Posted 04 Mar 2015 in reply to Alexander Popov Link to this post

    Unfortunately it doesn't work properly.  I apologize that didn't do a good job of explaining how to see the problem.  When the app starts click on Events.  Then click on the first Event.  You will get one button to Add a person and 2 people listed.

    In the code down in the event viewModel, in the showPage method, there are 2 sets of code.  One is the 'hacky' method that does work, but the proper way to make it work fails.  In your code the hacky version is active.  If you make the proper version active then the href for the Add a person button does not get generated properly.  To see it, just hover over the button and the event id will be missing.

    http://dojo.telerik.com/Etigi

    Thank you for taking a look at it.
  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 06 Mar 2015 Link to this post

    Hello Greg,

    Thank you for clarifying that. 
    This happens because the updated field should match the source binding in order to redraw the template. Using the "self.set('event.id', id)" notation will update the event object, however the updated field will be "event.id", which does not match the div's source binding. In this case you can use an approach similar to what I previously suggested - either update the whole object or trigger the change event manually and specify the updated field: 
    self.set('event.id', id);
    self.set('event.desc', 'Ski Martock, March 2nd, 2015');
    self.trigger("change", {field: "event"});

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready