MVVM Behavior in rendering data-template

[Bilal]

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

[Alexander Valchev]

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