推入ko.observableArray不更新UI

Question

I have a 2 view models

function group(){
name = "";
description = "";
members = ko.observableArray([]);
}

and

function groupTypes(){
gorupA = ko.observableArray([]);
groupB = ko.observableArray([]);
}

I have a regular JS array groupArray with group type objects as elements.

I've separate templates for groupA-template and groupB-template

I did:

var groupTypeInstance = new groupTypes;
groupTypeInstance.groupA.push(groupArray.slice(0,4));
ko.applyBindingsToNode(
            document.getElementById('group-a'),
            {
                template: {
                    name: "groupA-template",
                    foreach: groupTypeInstance.groupA
                }
            }
        );

This displayed the UI correctly. But afterwards when I do groupTypeInstance.groupA.push(groupArray[5]) , nothing happens. UI doesnt change. Console doesn't show any error. Array has the extra element when I print it in console. Why is the UI not getting updated?

Please ask for more details if needed.

Answer 1

Your code as it is do not work. You misspelled groupA and forgot the this. on the variables. Also, you cannot add individual array itens to another array by calling push() (it will work but not as you probably intended). Here is the code to do what you want, based on what you posted:

 $(function(){ function group(){ this.name = ""; this.description = ""; this.members = ko.observableArray([]); } function groupTypes(){ this.groupA = ko.observableArray([]); this.groupB = ko.observableArray([]); } var groupArray = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"] ; var groupTypeInstance = new groupTypes(); groupTypeInstance.groupA.push.apply(groupTypeInstance.groupA, groupArray.slice(0,4)); ko.applyBindingsToNode( document.getElementById('group-a'), { template: { name: "groupA-template", foreach: groupTypeInstance.groupA } } ); setInterval(function(){ groupTypeInstance.groupA.push(groupArray[5]); }, 1000); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/html" id="groupA-template"> <h3 data-bind="text: $data"></h3> </script> <div id="group-a"> </div>