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
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
Hello Greg,
This could be achieved either by setting the entire event object or by manually triggering the change event. For example:
Regards,
Alexander Popov
Telerik
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?
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
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
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.
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
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:
Regards,
Alexander Popov
Telerik
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!