Why knockoutjs js doesn't update view in case some sub array is changed

Question

I have next model wirt sub array

<!-- ko foreach: {data: userAdminView.viewRoles, as: 'rrole'} -->
<tr>                                                    
  <td class="userRolesRoleTitle"><b data-bind="text: rrole.role.name"></b><br/><i data-bind="text: rrole.role.description"></i></td>                                
  <td class="userRolesRoleGroups">
    <!-- ko foreach: {data: rrole.role.groups, as: 'group'} -->
    <div class="usersGroupElement" data-bind="html: group.viewName"></div>
    <!-- /ko -->
    <a class="btn emb green" data-bind="click: userAdminView.addNewGroup,visible:(rrole.role.isNewGroupAccessible) , attr: { value: rrole }"><i class="icon16 plus"></i>add</a>
  </td>
</tr>
<!-- /ko -->

it working well, but from bussines needs I need change dynamictly data in rrole.role.groups sub-array. My code is working and do it, I see that array is changed (added, remove element) in debug mode, but view is updated only if userAdminView.viewRoles array get changes. Why knockoutjs dos't mange it. How I can fix it ?

function userAdminView(user) {
    var self = this;
    self.viewRoles = ko.observableArray([]);
    self.saveNewGroup = function (data, event) {
        var datar = self.viewRoles();
        $.each(datar, function (index, vrole) {
            if (vrole.role.id == self.dialogRole.role.id) {
                var line = {
                    viewName: "<b>" + self.dialogCustomer.name + "</b>",
                    customer: self.dialogCustomer,
                    department: self.dialogDepartment,
                    isEdit: true
                };
                if (vrole.role.groups == null) {
                    vrole.role.groups = [];
                }
                vrole.role.groups.push(line);
            }
        });
    };
}

data structure:

{
    role: {
        description: role.description,
        id: role.id,
        name: role.name,
        groups: existingGroups,
        isNewGroupAccessible: self.canGrant(role, data.d)
    }
};

Thanks.

officert · Accepted Answer · 2013-05-31 12:00:56Z

1

Can we see your knockout model? Is the subgroup an observableArray()? if not it won't update.

Edit:

The way I have typically dealt with sub arrays is by manually mapping the top level observableArray, then creating a second observableArray for the subArray. Knockout has some handy utilities in the ko.utils namespace that we can use, knockout utils. The ko.utils function ko.utils.arrayForEach takes an array and returns an array, and takes a function that will get called forEach item in the original array. This is where we can do the mapping.

    var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

    //now that we have a javascript object we can pass that into ko.utils.arrayForEach

    viewModel.viewRoles = ko.utils.arrayForEach(dataFromServer, function(viewRole) {
        var newRole = {
            groups : ko.observableArray(ko.utils.arrayForEach(viewRole.group, function(group) {
                var newGroup = {
                    //map the properties from your JSON group to this object
                };
                return newGroup;
            })),
            //map any other properties from your JSON role to this object
        };
        return newRole;
    });

Once we have the JSON data as a javascript object we can pass it into ko.utils.arrayForEach. We pass ko.utils.arrayForEach the javascript array and a function that it will call for each item in that array, which are your roles. The first function creates a new Role object with the sub array which is also an observableArray() called groups.

Let me know if any of that is confusing I can try and explain more. Also I haven't actually run any of this code so there may be errors.

edited May 31, 2013 at 12:00

answered May 30, 2013 at 19:22

officert

1,2329 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

a3code Over a year ago

I feed to observableArray() JSON arrray with sub-arrays.

officert Over a year ago

Let me know if I am misunderstanding, but it sounds like the userAdminView.viewRoles property in your model is the observableArray() that you are populating from the JSON, and the JSON array has subarrays. If you could post your mapping code that would be helpful, but it sounds like you need to manually map from the JSON into the viewRoles observableArray() and then for each object in that array you need to create another observableArray() for the sub group and map the sub array in the JSON into that.

a3code Over a year ago

Yes you are right. I have added this code. How to work with sub arrays and observableArray()?

officert Over a year ago

I've edited my answer to show how to populate the sub observableArray

Lynn Ning · Accepted Answer · 2013-06-03 08:02:11Z

0

The role.groups must be a ko.observableArray.

This should work for you:

if (typeof vrole.role.groups !== 'function') {
    vrole.role.groups = ko.observableArray(vrole.role.groups);
}

answered Jun 3, 2013 at 8:02

Lynn Ning

713 bronze badges

Collectives™ on Stack Overflow

Why knockoutjs js doesn't update view in case some sub array is changed

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related