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

MVVM set not triggering template update

6 Answers 386 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 26 Feb 2015, 02:35 PM
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.

6 Answers, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 26 Feb 2015, 02:37 PM
Sorry for the repost, but I got a message that the initial post failed.
0
Alexander Popov
Telerik team
answered on 02 Mar 2015, 12:34 PM
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!
 
0
Greg
Top achievements
Rank 1
answered on 02 Mar 2015, 05:20 PM
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?
0
Alexander Popov
Telerik team
answered on 04 Mar 2015, 12:22 PM
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!
 
0
Greg
Top achievements
Rank 1
answered on 04 Mar 2015, 12:40 PM
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.
0
Alexander Popov
Telerik team
answered on 06 Mar 2015, 11:20 AM
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!
 
Tags
MVVM
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or