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

How to update the ViewModel after programatic changes

3 Answers 641 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Denis
Top achievements
Rank 1
Denis asked on 08 Apr 2014, 08:16 PM
Hello,

In the following code, I would like to bind some data (to display it)... but is some case, I need to change the value of some component by code (in JavaScript). In this case, the ViewModel is not updated (by a "two way" binding). Why ?

HTML
    <input type="button" id="btnChangeValues" value="Change Values" /><br/><br />
    <input id="myNumeric" data-bind="value: MyNumeric" /> 
    <input id="myDate" data-bind="value: MyDate" />   

JavaScript
   window.onload = function() {

    var viewModel = kendo.observable({ MyNumeric: 123, MyDate: new Date(2014, 1, 15) });

    $("#myNumeric").kendoNumericTextBox();
    $("#myDate").kendoDatePicker();
    kendo.bind(document.body, viewModel);

    $("#btnChangeValues").click(function() {
        $("#myNumeric").data("kendoNumericTextBox").value(789);
        $("#myDate").data("kendoDatePicker").value(new Date(2015, 3, 28));
        alert(viewModel.get("MyNumeric") + " - " + viewModel.get("MyDate"));   // Display always OLD values: 123 and 2014-2-15
    });

   };


Can you tell me how to force a "ViewModel Refreshing" ? Is it possible ?

Thanks

Denis

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 10 Apr 2014, 11:31 AM
Hello Denis,

The MVVM uses the change event of the widgets to determine whether to update the corresponding model property. When value of the widget is changed via value method, a change change will not be triggered and the MVVM value binding won't be notified for this change. When you want to update the value programatically then you will need to trigger change event of the widget to notify every MVVM binding attached to this widget:
$("#myNumeric").data("kendoNumericTextBox").value(789);
$("#myNumeric").data("kendoNumericTextBox").trigger("change");


Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Denis
Top achievements
Rank 1
answered on 10 Apr 2014, 08:08 PM
Thanks very much... It's perfect !

Where can I find the documentation about this method (there are other argument, except "change" to use) ?

Denis Voituron
0
Georgi Krustev
Telerik team
answered on 11 Apr 2014, 07:27 AM
Hello Denis,

Here you can find more information about trigger method.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Denis
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Denis
Top achievements
Rank 1
Share this question
or