Knockout - ko.observableArray.fn.pushAll

http://stackoverflow.com/questions/9967976/update-knockout-js-observable-from-json/9968443#9968443

by johnpapa

HTML

<div class='liveExample'> 
    
    <form method='POST'> 
        <p>You have asked for <span data-bind='text: users().length'>&nbsp;</span> User(s)</p> 
        <table data-bind='visible: users().length > 0'> 
            <thead> 
                <tr> 
                    <th>user_id</th> 
                    <th>password</th>
                    <th /> 
                </tr> 
            </thead> 
            <tbody data-bind='template: { name: "userRowTemplate", foreach: users }' /> 
        </table> 
        
        <button data-bind='click: addUser'>Add User</button> 
        <button data-bind='click: addJSON'>Add JSON</button> 
    </form> 
    
    <script id='userRowTemplate' type='text/html'> 
        <tr>
<td><input class='required' data-bind='value: user_id, uniqueName: true' /></td>
<td><input class='required number' data-bind='value: password, uniqueName: true' /></td>
          
        </tr>
    </script> 
    
    
</div>

JavaScript

/*
ko.observableArray.fn.pushAll = function(valuesToPush) {
    var items = this;
    for (var i = 0, j = valuesToPush.length; i < j; i++) {
        items.push(valuesToPush[i]);
    }
    return items;
};
*/
ko.observableArray.fn.pushAll = function(valuesToPush) {
    var underlyingArray = this();
    this.valueWillMutate();
    ko.utils.arrayPushAll(underlyingArray, valuesToPush);
    this.valueHasMutated();
    return this;
};



function Users(user_id, password) {
    this.user_id = ko.observable();
    this.password = ko.observable();
}

var viewModel = {
    users: ko.observableArray([]),
    addUser: function() {
        this.users.push({
            user_id: "",
            password: ""
        });
    },
    addJSON: function() {
        var JSONdataFromServer = '[{"user_id":"frances","password":"password1"},{"user_id":"joe","password":"password2"}]';
        var dataFromServer = ko.utils.parseJson(JSONdataFromServer);

        // option 1
        //ko.utils.arrayPushAll(this.users(), dataFromServer);
        //this.users.valueHasMutated();
        // option 2
        //for (var i = 0, j = dataFromServer.length; i < j; i++)
        //this.users.push(dataFromServer[i]);
        //option 3
        this.users.pushAll(dataFromServer);
    }

};

viewModel.users();
ko.applyBindings(viewModel);