MVVM Behavior in rendering data-template

2 posts, 1 answers
  1. Bilal
    Bilal avatar
    109 posts
    Member since:
    Oct 2014

    Posted 13 Feb 2015 Link to this post

    Hi,
    I have a viewmodel that tracks a "currentAccount" object. This object contains a property of an array called users.
    For users property, I am using the data-template to render each record in the array.

    Beside each record I will manage show/hide 2 buttons: Remove and Add More. Below the viewmodel and view extracts.

    My question is, when a new row is added or one is removed, what's the behavior in rendering the records in the array? Is MVVM framework going to render all items in the array every time a change occurs or will just render the newly added records or remove the ones removed?

    The reason why I am asking is because I am trying to track 2 buttons: Remove and Add More.
    - Show Remove button only when users' array contain 1 record
    - Show Add More button only for the last row rendered

    Seems the MVVM framework doesn't re-render entire array when a change occurs. Why? let's see.

    1.<button type="button" data-bind="visible: showRemoveBtn, click: removeMore" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
    2.<button type="button" data-bind="visible: isLastUser, click: addMore" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>

    01.isLastUser: function(e) {
    02.    var current_uid = e.uid;
    03.    var users_count = this.get("currentAccount").users.length;
    04.    var last_user_uid = this.get("currentAccount").users[users_count-1].uid;
    05.    return current_uid === last_user_uid;
    06.},
    07.showRemoveBtn: function() {
    08.    return this.get("currentAccount").users.length > 1;
    09.},

    First row works fine. Remove button is hidden and Add More buttons is shown.
    Now, when I press "Add More", a new row is added, Remove & Add More buttons are showing. However, "Add More" button is still showing on the first row as if the "isLastUser" function didn't run for the first row, hence I concluded, the first row was not re-rendered.

    How to go around this one?

    Thanks
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Feb 2015 Link to this post

    Hello Bilal,

    My question is, when a new row is added or one is removed, what's the behavior in rendering the records in the array?
    Is MVVM framework going to render all items in the array every time a change occurs or will just render the newly added records or remove the ones removed?

    The MVVM framework will only render the newly added or remove the ones removed. See this example: http://dojo.telerik.com/@valchev/eFOze (first rows remain unchanged)

    You may force re-rendering of all items with:
    viewModel.trigger("change", { field: "products" }); //force re-rendering of all items


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top