knockout.js - data - knockout subscribe change value

Actualizar Knockout.js observable desde JSON

Question

Intento establecer una grilla y actualizarla con más registros a través de JSON. En este sencillo ejemplo, puedo lograr la funcionalidad requerida pero solo puedo actualizar / presionar un registro JSON. Me gustaría poder agregar varios registros a través de JSON? ¿Cómo podría lograr esto? Supuse que tendría que crear algún tipo de bucle y empujar cada resultado de JSON a lo observable, pero esperaba que el nocaut pudiera tener una mejor forma de actualizar / analizar a través de JSON.

Aquí hay una copia de lo que he logrado hasta ahora: 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> 

Actualizar esto parece funcionar, pero me pregunto si es un método más eficiente.

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

Puedes usar el plugin de mapping

Ver http://knockoutjs.com/documentation/plugins-mapping.html

Answer 2

Aquí hay 3 formas en que podría hacer esto ... encontrado en este violín: http://jsfiddle.net/johnpapa/nfnbD/

1) Usa la función ko.utils.arrayPushAll 2) usa tu propia lógica 3) Escribe tu propia función en observableArray

Detalles ...

1) Si usa la función ko.utils.arrayPushAll, también deberá invocar a valueHasMutated, ya que la matriz se sobrescribe de manera efectiva consigo misma. La observabilidad no se dispara siempre que le digas que ha cambiado. Aquí es cómo puedes hacer eso:

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

2) La segunda opción es escribir su propia lógica de bucle, esencialmente usando el mismo código que la función arrayPushAll como esta.

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

3) Cree una función propia en el array observable, así:

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

Aunque este código anterior lo notificará cada vez que se agrega un elemento. Entonces, sería mejor agregarlos todos, luego notificar. Esto sería más eficiente. Me gusta esto:

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

Entonces llámalo así:

this.users.pushAll(dataFromServer);

Answer 3

Sé que esta es una publicación bastante antigua, pero me encontré con ella y pensé que mostraría otra forma de hacerlo en knockout sin crear tu propia pushAll para futuros visitantes.

Puede usar un push.apply en knockout en una matriz observable. Esto le permitirá enviar múltiples elementos desde un servidor y solo disparar una notificación.

Ejemplo en JsFiddle

Editar : La lectura adicional para cualquiera que lea esto y quiera saber por qué usar push.apply lugar de usar push en un bucle