Hi,
I have this problem with kendo mobile.
id: null,
type: null,
accountingKey: null,
selectedItems : [],
resultObj: []
});
I have this problem with kendo mobile.
- I have a kendo observable object onto which I bind the change event.
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);
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?
8 Answers, 1 is accepted
0
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?
Regards,
Alexander Valchev
Telerik
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?
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.
Thank you in advance for the cooperation.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Gediminas
Top achievements
Rank 2
answered on 07 Nov 2013, 10:37 AM
Yes, it does seem to work in your example.
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.
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.
0

Gediminas
Top achievements
Rank 2
answered on 07 Nov 2013, 01:39 PM
Furthermore, do I have to rebind the viewModel to the HTML?
0
Hello Gediminas,
Thank you for the provided example.
The problem comes from the complex binding path that you use:
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.
For your convenience I updated the jsBin test page:
Regards,
Alexander Valchev
Telerik
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:
Regarding your second question, both binding and rebinding are done via kendo.bind method.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Gediminas
Top achievements
Rank 2
answered on 12 Nov 2013, 02:28 PM
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.
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.
0
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:
Regards,
Alexander Valchev
Telerik
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:
I rewrote your sample. Please check it as well as the MVVM binding help topics:
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Gediminas
Top achievements
Rank 2
answered on 14 Nov 2013, 03:58 PM
Hi, thanks for the answer.
The templates for select are being used to do this:
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?
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>
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?
0
Hi Gediminas,
You cannot render the select input options via template. There is a special source binding for select elements which is described here:
Using:
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
You cannot render the select input options via template. There is a special source binding for select elements which is described here:
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!