Knockout-2.2.0, iscriviti ottenere valore prima di cambiare e nuovo valore

Question

collegamento jsfiddle: http://jsfiddle.net/T8ee7/

Quando chiamo di Knockout metodo iscriversi c'è un modo posso ottenere sia il valore precedente e la nuova? In questo momento, posso solo chiamare ottenere questi valori separatamente. Voglio attivare un codice se il vecchio e il nuovo valore sono diversi.

Suppongo che avrei potuto fare quanto segue, ma si può ottenere disordinato ... (http://jsfiddle.net/MV3fN/)

var sv = sv || {}; 
sv.PagedRequest = function (pageNumber, pageSize) { 
    this.pageNumber = ko.observable(pageNumber || 1); 
    this.numberOfPages = ko.observable(1); 
    this.pageSize = ko.observable(pageSize || sv.DefaultPageSize); 
}; 


var _pagedRequest = new sv.PagedRequest(); 
var oldValue; 
_pagedRequest.pageNumber.subscribe(function (previousValue) { 
    console.log("old: " + previousValue); 
    oldValue = previousValue; 
}, _pagedRequest, "beforeChange"); 


_pagedRequest.pageNumber.subscribe(function (newValue) { 

    console.log("new: " + newValue); 
    if (oldValue != newValue) { 
     console.log("value changed!"); 
    } 

}); 

_pagedRequest.pageNumber(10); 
_pagedRequest.pageNumber(20); 
​ 

Answer 1

http://jsfiddle.net/MV3fN/3/

var sv = sv || {}; 
sv.PagedRequest = function (pageNumber, pageSize) { 
    var self = this; 
    self.pageNumber = ko.observable(pageNumber || 1); 
    self.numberOfPages = ko.observable(1); 
    self.pageSize = ko.observable(pageSize || sv.DefaultPageSize); 

    self.pageNumber.subscribe(function (previousValue) { 
     console.log(previousValue); 
     console.log(self.pageNumber.arguments[0]); 
     if (previousValue != _pagedRequest.pageNumber.arguments[0]) { 
      console.log('value changed'); 
     } 
     else { 
      //This won't get executed because KO doesn't 
      //call the function if the value doesn't change 
      console.log('not changed'); 
     } 
    }, _pagedRequest, "beforeChange"); 
}; 

var _pagedRequest = new sv.PagedRequest(); 

_pagedRequest.pageNumber(10); 
_pagedRequest.pageNumber(20); 
_pagedRequest.pageNumber(20); 
_pagedRequest.pageNumber(5); 

Non so se siete veramente suppone usare arguments[0], ma sembra funzionare.

Si potrebbe anche configurare il proprio metodo per raggiungere questo obiettivo in un modo molto più pulito:

http://jsfiddle.net/PXKgr/2/

... 
    self.setPageNumber = function(page) { 
     console.log(self.pageNumber()); 
     console.log(page); 
     if (self.pageNumber() != page) { 
      console.log('value changed'); 
     } 
     else { 
      console.log('not changed'); 
     } 
     self.pageNumber(page); 
    }; 
... 
_pagedRequest.setPageNumber(10); 
_pagedRequest.setPageNumber(20); 
_pagedRequest.setPageNumber(20); 
_pagedRequest.setPageNumber(5); 

Answer 2

Questo sembra funzionare per me

ko.observable.fn.beforeAndAfterSubscribe = function (callback, target) { 
var _oldValue; 
this.subscribe(function (oldValue) { 
    _oldValue = oldValue; 
}, null, 'beforeChange'); 
    this.subscribe(function (newValue) { 
    callback.call(target, _oldValue, newValue); 
}); 
}; 

• Tutte a: http://ideone.com/NPpNcB#sthash.wJn57567.dpuf

Answer 3

Preferisco usare un observable extender.

http://jsfiddle.net/neonms92/xybGG/

Extender:

ko.extenders.withPrevious = function (target) { 
    // Define new properties for previous value and whether it's changed 
    target.previous = ko.observable(); 
    target.changed = ko.computed(function() { return target() !== target.previous(); }); 

    // Subscribe to observable to update previous, before change. 
    target.subscribe(function (v) { 
     target.previous(v); 
    }, null, 'beforeChange'); 

    // Return modified observable 
    return target; 
} 

Esempio Uso:

// Define observable using 'withPrevious' extension 
self.hours = ko.observable().extend({ withPrevious: 1 }); 

// Subscribe to observable like normal 
self.hours.subscribe(function() { 
    if (!self.hours.changed()) return; // Cancel if value hasn't changed 
    print('Hours changed from ' + self.hours.previous() + ' to ' + self.hours()); 
});