jquery - knockout - ko observable();

KnockoutJS suscríbase a los cambios de propiedad con el complemento de mapeo

Question

¿Hay alguna forma en que pueda decir el complemento de mapeo knockout para suscribirse a todos los cambios de propiedad llamar a una determinada función?

Me doy cuenta de que puedo suscribirme manualmente al evento de cambio de propiedad de esta manera:

var viewModel = {
    name: ko.observable(''foo''),
}

// subscribe manually here
viewModel.name.subscribe(function(newValue){
   // do work
})

Sin embargo, me gustaría poder suscribirme genéricamente, ya que mis modelos de vista pueden variar, no quiero codificar los nombres de las propiedades. Creé una función que hace esto, pero puede que no sea el mejor enfoque. Funciona en todos los navegadores, excepto en IE7 y versiones posteriores.

Aquí tomo un modelo de vista como argumento y trato de reflejarlo suscribiéndome a las propiedades:

function subscribeToKO(data) {

        $.each(data, function (property, value) {
            if (getType(value) == "Object")
                data[property] = subscribeToKO(value);
            else if (getType(value) == "Array") {
                $.each(value, function (index, item) {
                    item = subscribeToKO(item);
                });
            }
            else {
                if (value.subscribe) {
                    value.subscribe(function (newValue) {
                        // do work                                         
                    });
                }
            }
        });
        return data;
    }

Como dije, esto funciona, pero dado que estoy usando el pluging de mapeo, esperaba que hubiera un gancho que pudiera usar para proporcionarle una función que se suscribiría genéricamente a los cambios de propiedad.

Algo como:

mapping = {
   create: function(options){
       options.data.subscribe(function(newValue){
            // do work ???
       });
   }
}

ko.mapping.fromJS(viewModel, mapping);

¿Algunas ideas?

Answer 1

Aquí hay un enfoque genérico basado en la bandera sucia de Ryan Niemeyer .
Haga clic aquí para el JsFiddle .

Html:

<ol>
<li>
    Telephone : <input data-bind="value: telephone"/>
</li>
<li>
    Address : <input data-bind="value: address"/>
</li>
</ol>​

Javascript:

var model = {
    telephone: ko.observable(''0294658963''),
    address: ko.observable(''167 New Crest Rd'')

};
// knockout extension for creating a changed flag (similar to Ryan''s dirty flag except it resets itself after every change)
ko.changedFlag = function(root) {
    var result = function() {};
    var initialState = ko.observable(ko.toJSON(root));

    result.isChanged = ko.dependentObservable(function() {
        var changed = initialState() !== ko.toJSON(root);
        if (changed) result.reset();
        return changed;
    });

    result.reset = function() {
        initialState(ko.toJSON(root));
    };

    return result;
};
// add changed flag property to the model
model.changedFlag = new ko.changedFlag(model);
// subscribe to changes
model.changedFlag.isChanged.subscribe(function(isChanged) {
    if (isChanged)  alert("model changed");
});
ko.applyBindings(model);​

Answer 2

Este práctico y pequeño plugin es bastante similar a lo que hiciste, pero viene con varias opciones y puede trabajar sobre un conjunto mucho más amplio de requisitos sin requerir el plugin Mapping:

https://github.com/ZiadJ/knockoutjs-reactor

Básicamente le permite escribir este tipo de código:

ko.watch(viewModel, function(target, trigger) { 
    // do work
});