从JSON更新Knockout.js Observable

Spa*_*kle 12 knockout-2.0 knockout.js

我试图建立一个网格并通过JSON用更多记录更新它.在这个简单的例子中,我能够实现所需的功能,但我只能更新/推送一个JSON记录.我希望能够通过JSON添加多个记录?我怎么能实现这个目标?我假设我可能必须创建某种for循环并将每个JSON结果推送到observable但我希望淘汰赛可能有更好的方法通过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> 
Run Code Online (Sandbox Code Playgroud)

更新这似乎工作,但我想知道他们是否是一个更有效的方法?

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]);
      };   
Run Code Online (Sandbox Code Playgroud)

Joh*_*apa 22

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

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

细节 ...

1)如果你使用ko.utils.arrayPushAll函数,你也需要调用valueHasMutated,因为数组有效地被自己覆盖.可观察性并没有触发你告诉它改变的unles.这是你如何做到这一点:

ko.utils.arrayPushAll(this.users(), dataFromServer);
this.users.valueHasMutated();
Run Code Online (Sandbox Code Playgroud)

2)第二个选项是编写自己的循环逻辑,基本上使用与arrayPushAll函数相同的代码.

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

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;
};
Run Code Online (Sandbox Code Playgroud)

虽然上面的代码会在每次添加项目时通知.所以最好将它们全部添加,然后通知.这会更有效率.像这样:

ko.observableArray.fn.pushAll = function(valuesToPush) {
    var underlyingArray = this();
    this.valueWillMutate();
    ko.utils.arrayPushAll(underlyingArray, valuesToPush);
    this.valueHasMutated();
    return this;
};
Run Code Online (Sandbox Code Playgroud)

然后像这样称呼它:

this.users.pushAll(dataFromServer);
Run Code Online (Sandbox Code Playgroud)