backbone.js - Backbone with slider -

this scenario apply whole bunch of ui widgets, simple example i'll use slider (e.g. jquery ui slider).

i have jquery slider notifies backbone.model when 'slides' when stops. views update in both cases. want add undo/redo functionality listen changes in model, , create undo objects each change, using previous() values. however, want create undo objects when slider stops, not on every change during sliding.

so, need slider notify model of changes slider value in 2 different ways can distinguished undo code.

at moment, i'm doing model.trigger('slidevalue', [newvalue]) while sliding , views listen , update on trigger. when slider stops, model.set('slidevalue', newvalue) , undo functionality listens these change events create new undo object , add queue.

the reason i'm doing model.trigger('slidevalue', [newvalue]) allows me notify views model changing (so can render change), when come model.set('slidevalue', newvalue) when slider stops, previous() value of model available undo functionality (hasn't been changed during sliding).

but still feels horribly hacked. there nicer alternative model.trigger()?

please consider working example http://jsfiddle.net/b4ar6/1/

i used backbone.collection add new undo values on stop event , backbone.model hold/update current slider value on slide event.

// reference slider div var sliderdiv = $( "#slider" );  // reference undo button var undobutton = $( "#undo" );  // create new model save slider value state var slidervaluestatemodel = new (backbone.model.extend());  // create new collection save slider undo values var slidervalueundocollection = new (backbone.collection.extend());  // initialize silider sliderdiv.slider();  // add initial slider undo value collection slidervalueundocollection.add({ value: sliderdiv.slider("value") });  // listen undo button click undobutton.on("click", function() {     var model, value;      // nothing when there no undo history     if (slidervalueundocollection.length < 2) return false;      // remove last slider undo model current value     slidervalueundocollection.pop();      // previous slider undo model     if (slidervalueundocollection.length === 1) {         // keep initial value in collection         model = slidervalueundocollection.first();     } else {         // , remove value collection         model = slidervalueundocollection.pop();     }      // slider undo value model     value = model.get("value");      // save new undo value collection     slidervalueundocollection.add({ value: value });      // set new value previous slider undo value     sliderdiv.slider("option", "value", value); });  // listen slide event slider , set value model sliderdiv.on("slide", function( event, ui ) {     // save new slider value model     slidervaluestatemodel.set({ value: ui.value }); });  // listen stop event slider , add undo value collection sliderdiv.on("slidestop", function( event, ui ) {     // add new slider undo value collection     slidervalueundocollection.add({ value: ui.value }); });