Wednesday, 27 July 2011

Knockout.js: Making an observable that fits into an undo system

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
(from the homepage)

I'm using knockout fairly extensively thoughout a new app I'm building. This app has a full undo / redo system for all user actions, and this caused a bit of a problem with knockout. By default knockout will immediately update the data model with the results of user actions. Furthermore, when it notifies you of changes to values, it only tells you the value that the data has changed to - and it's too late to find out what the value was before.

Of course there are hacky ways around this, but a much better solution suggested by (someone on a mailing list I need to look up again) was to create a 'subclass' of observable that allows access to the previous value of a variable.

Here's the code:
$("document").ready(function() {

/**
* An observable that allows access to the last value. Useful for undo
* purposes.
*
* Usage:
* viewModel.foobar = ko.lastValueObservable();
* viewModel.foobar.subscribe(function(val) { alert("foobar changed from " + viewModel.foobar.lastValue() + " to " + val); } );
*/
ko.lastValueObservable = function(initValue) {
var _value = ko.observable(initValue);
var _lastValue = initValue;

var result = ko.dependentObservable({
// Just return the real value
read: function() {
return _value();
},

write: function(newValue) {
// store the last value before writing...
_lastValue = _value();

_value(newValue);
}
});

// Add a new function to return the last value
result.lastValue= function() {
return _lastValue;
};

return result;
};
});

1 comment: