Observable change event not firing

[Gediminas]

Hi,
I have this problem with kendo mobile.

• I have a kendo observable object onto which I bind the change event. 

    accViewModel = kendo.observable({
        id: null,
        type: null,
        accountingKey: null,
        selectedItems : [],
        resultObj: []
    });

• After some input fields, corresponding to selectedItems in observable have changed I do an AJAX request.
• Then I update a nested objects inside the observable with .set() method

    accViewModel.set("resultObj", response.resultObj);
    accViewModel.set("selectedItems ", response.selectedItems);

•  However after the updating the observable it no longer calls the change event handler when I edit input fields by hand (not using the set method) that are bound via MVVM in the HTML.

However, I can still trigger the change event by updating the fields with .set() method, however it calls the method twice. What could be happening here? Any ideas?

[Alexander Valchev]

Hello Gediminas,

I am afraid that the provided information is not sufficient enough in order to determine where exactly the problem comes from. I tried to reproduce the issue in a sample page but to no avail. Could you please check my sample and let me know what I am missing?

• http://jsbin.com/uTiMeTI/2/edit
  
  

Is it possible to reproduce the issue in the sample which I provided and send me back a link to the updated jsBin? In this way I will be able to examine your configuration in details and provide you with a concrete recommendations.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik

[Gediminas]

Yes, it does seem to work in your example. 

• http://jsbin.com/uTiMeTI/11/

Let me ask a theoretical question then, how would you suggest updating the objects inside viewModel after an AJAX request? Is .set() the correct way? I have seen people using $.extend() for that.

[Gediminas]

Furthermore, do I have to rebind the viewModel to the HTML?

[Alexander Valchev]

Hello Gediminas,

Thank you for the provided example.

The problem comes from the complex binding path that you use:

data-bind="value: selectedItems[0].controlDim[0].value"

The change event listener that is responsible for updating the HTML and ViewModel is hooked up to a lower level (not to the root ViewModel). After you replace the selectedItems array the old change event listener is destroyed.

In order to get this scenario working you should update the nested 'controlDim' array.

viewModel.selectedItems[0].set("controlDim", response.selectedItems[0].controlDim);

For your convenience I updated the jsBin test page:

• http://jsbin.com/uTiMeTI/14/edit
  
  

Regarding your second question, both binding and rebinding are done via kendo.bind method.

Regards,
Alexander Valchev
Telerik

[Gediminas]

Ok, this makes a lot of sense. However, in reality my case is not as simple as this example, I actually have nested templates there.
I have updated the code example : http://jsbin.com/uTiMeTI/28/  , it is not working for some reason :( .
What I am trying to achieve is a Select element which has a couple of options, and when you select an option we display several values and input fields corresponding to that selection element, which is only a part of a collection of element objects. 

[Alexander Valchev]

Hello Gediminas,

From my point of view the scenario seems to be unnecessarily complicated - I do not see the point of using the nested templates. Moreover there are mistakes in the source binding pattern that you use. For example select element source binding should be done in this way:

• http://docs.kendoui.com/getting-started/framework/mvvm/bindings/source#source-binding-of-select-elements
  
  

Also the change event handler should be part of the ViewModel.

I rewrote your sample. Please check it as well as the MVVM binding help topics:

• http://jsbin.com/uTiMeTI/31/edit
  
  
• http://docs.kendoui.com/getting-started/framework/mvvm/bindings/source
  
  
• http://docs.kendoui.com/getting-started/framework/mvvm/bindings/events
  
  

Regards,
Alexander Valchev
Telerik

[Gediminas]

Hi, thanks for the answer.
The templates for select are being used to do this:

<option data-bind="value: itemNumber, text: description" #if(lineNumber === "-1"){ # data-localize="mobile.editaccounting" #}# ></option>


Is using templates for select simply not recommended or it's plain wrong and will cause further bugs etc.?

I will read up on the links that you have provided and try to simplify my code base. However, as far as I understand the underlying problem is that when I re-set the viewModel values I should do it in a more granular fashion, rather than just setting the parent element? Is that a correct conclusion for the event handlers getting messed up?

If yes then does it imply that I will have to loop through the arrays of objects and set values accordingly?

[Alexander Valchev]

Hi Gediminas,

You cannot render the select input options via template. There is a special source binding for select elements which is described here:

• http://docs.kendoui.com/getting-started/framework/mvvm/bindings/source#source-binding-of-select-elements
  
  

Using:

<select data-bind="source: formatedResultObj, events: { change: updateView }" data-template="lineTemplate"></select>

is not supported.
In case you insist to work with a template, you may consider switching to DropDownList widget which provides dataSource and template support.

The underlying problem is the scenario is over complicated - nested templates, having array fields with a single object and etc. For example what is the point for selectedItem to be an array?

Please check the updated jsBin sample which I provided in my previous reply as well as the MVVM articles which explain the supported binding scenarios.

Regards,
Alexander Valchev
Telerik