knockout.js - 从 JSON 更新 Knockout.js Observable

Question

我试图建立一个网格并通过 JSON 用更多记录更新它。在这个简单的例子中，我能够实现所需的功能，但我只能更新/推送一个 JSON 记录。我希望能够通过 JSON 添加多条记录？我怎么能做到这一点？我假设我可能必须创建某种 for 循环并将每个 JSON 结果推送到可观察对象，但我希望 knockout 可能有更好的方式来更新/解析 JSON？

这是我迄今为止所取得成就的副本:http://jsfiddle.net/sparkhill/crSbt/

     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 () {


        //Works Fine
        var JSONdataFromServer
        ='{"user_id":"frances","password":"password"}';

        //More than one result - wont map - Would Ideally like to map lots of records at one time
//var JSONdataFromServer ='{"user_id":"frances","password":"password"}, {"user_id":"frances","password":"password"}';

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


        this.users.push(dataFromServer);

         //Tried
        //this.users.push(JSON.parse(JSONdataFromServer));


    }

};

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

    </script> 

更新这似乎有效，但我想知道他们是否是一种更有效的方法？

addJSON: function () {

        //Works Fine
        var JSONdataFromServer
        ='[{"user_id":"frances","password":"password"},{"user_id":"timmy","password":"password"}]';

        var results = JSON.parse(JSONdataFromServer);

        var i = results.length;

        for(var i = 0; i < results.length; i++){

            this.users.push(results[i]);
      };   

Answer 1

这里有 3 种方法可以做到这一点......在这个 fiddle 中找到:http://jsfiddle.net/johnpapa/nfnbD/

1) 使用 ko.utils.arrayPushAll 函数
2)使用你自己的逻辑
3) 在 observableArray 上编写自己的函数

详情...

1) 如果您使用 ko.utils.arrayPushAll 函数，您也需要调用 valueHasMutated，因为数组实际上会被自身覆盖。除非您告诉它已更改，否则可观察性不会触发。您可以这样做:

ko.utils.arrayPushAll(this.users(), dataFromServer);
this.users.valueHasMutated();

2)第二种选择是自己编写循环逻辑，本质上使用与这样的arrayPushAll函数相同的代码。

for (var i = 0, j = dataFromServer.length; i < j; i++)
this.users.push(dataFromServer[i]);

3) 在 observableArray 上创建一个你自己的函数，像这样:

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;
};

然后像这样调用它:

this.users.pushAll(dataFromServer);