Observable change event not firing

9 posts, 0 answers
  1. Gediminas
    Gediminas avatar
    5 posts
    Member since:
    Oct 2013

    Posted 05 Nov 2013 Link to this post

    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?
  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 07 Nov 2013 Link to this post

    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?
    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gediminas
    Gediminas avatar
    5 posts
    Member since:
    Oct 2013

    Posted 07 Nov 2013 Link to this post

    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.
  7. Gediminas
    Gediminas avatar
    5 posts
    Member since:
    Oct 2013

    Posted 07 Nov 2013 Link to this post

    Furthermore, do I have to rebind the viewModel to the HTML?
  8.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 11 Nov 2013 Link to this post

    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:
    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!
  11. Gediminas
    Gediminas avatar
    5 posts
    Member since:
    Oct 2013

    Posted 12 Nov 2013 Link to this post

    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. 
  13. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 14 Nov 2013 Link to this post

    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:
    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:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Gediminas
    Gediminas avatar
    5 posts
    Member since:
    Oct 2013

    Posted 14 Nov 2013 Link to this post

    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?
  17. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 14 Nov 2013 Link to this post

    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:
    <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!
Back to Top