Backbone with slider - backbone.js

Question

This scenario could apply to a whole bunch of UI widgets, but for a simple example I'll use a slider (E.g. jQuery UI slider).
I have a jQuery slider that notifies the Backbone.Model when it 'slides' as well as when it stops. The Views update in both cases.
I want to add Undo/Redo functionality that will listen for changes in the Model, and create Undo objects for each change, using the previous() values. However, I only want to create Undo objects when the slider STOPs, not on every change during sliding.
So, I need the slider to notify the Model of changes to the slider value in two different ways that can be distinguished by the Undo code.
At the moment, I'm doing Model.trigger('slideValue', [newValue]) while sliding and the Views listen and update on this trigger.
Then when the slider stops, I do Model.set('slideValue', newValue) and the Undo functionality listens for these change events to create a new Undo object and add to the queue.
The reason I'm doing Model.trigger('slideValue', [newValue]) is that this allows me to notify all the Views that the Model is changing (so they can render this change), but when I come to do Model.set('slideValue', newValue) when the slider stops, the previous() value of the Model is available to my Undo functionality (hasn't been changed during the sliding).
But this still feels horribly hacked. Is there a nicer alternative to the Model.trigger()?

Answer 1

Please consider this working example http://jsfiddle.net/B4Ar6/1/
I used Backbone.Collection to add new undo values on stop event and Backbone.Model to hold/update current slider value on slide event.
// Get reference to the slider div
var sliderDiv = $( "#slider" );
// Get reference to the undo button
var undoButton = $( "#undo" );
// Create new model to save slider value state
var sliderValueStateModel = new (Backbone.Model.extend());
// Create new collection to save slider undo values
var sliderValueUndoCollection = new (Backbone.Collection.extend());
// Initialize silider
sliderDiv.slider();
// Add initial slider undo value to the collection
sliderValueUndoCollection.add({ value: sliderDiv.slider("value") });
// Listen to the undo button click
undoButton.on("click", function() {
var model, value;
// Do nothing when there is no undo history
if (sliderValueUndoCollection.length < 2) return false;
// Remove the last slider undo model with current value
sliderValueUndoCollection.pop();
// Get previous slider undo model
if (sliderValueUndoCollection.length === 1) {
// Keep initial value in collection
model = sliderValueUndoCollection.first();
} else {
// Get and remove the value from collection
model = sliderValueUndoCollection.pop();
}
// Get slider undo value from the model
value = model.get("value");
// Save new undo value to the collection
sliderValueUndoCollection.add({ value: value });
// Set the new value as previous slider undo value
sliderDiv.slider("option", "value", value);
});
// Listen to slide event from slider and set value to the model
sliderDiv.on("slide", function( event, ui ) {
// Save new slider value to the model
sliderValueStateModel.set({ value: ui.value });
});
// Listen to stop event from slider and add undo value to the collection
sliderDiv.on("slidestop", function( event, ui ) {
// Add new slider undo value to the collection
sliderValueUndoCollection.add({ value: ui.value });
});