Question

这种情况可能适用于一大堆UI小部件，但是对于一个简单的例子，我将使用一个滑块（例如jQuery UI滑块）。

我有一个jQuery滑块，当它“滑动”时以及停止时通知Backbone.Model。两种情况下的视图都会更新。我想添加撤消/重做功能，它将侦听模型中的更改，并使用previous（）值为每个更改创建撤消对象。但是，我只想在滑块停止时创建撤消对象，而不是在滑动期间每次更改时创建撤消对象。

所以，我需要滑块以两种不同的方式通知模型滑块值的变化，可以通过撤销代码区分。

目前，我在滑动时正在做Model.trigger（'slideValue'，[newValue]），并且视图会在此触发器上侦听和更新。然后当滑块停止时，我执行Model.set（'slideValue'，newValue），撤销功能侦听这些更改事件以创建新的撤消对象并添加到队列中。

我正在做Model.trigger（'slideValue'，[newValue]）的原因是这允许我通知模型正在改变的所有视图（因此他们可以渲染此更改），但是当我来到当滑块停止时，执行Model.set（'slideValue'，newValue），模型的previous（）值可用于我的撤消功能（滑动期间没有更改）。

但这仍然感觉非常可怕。是否有更好的替代Model.trigger（）？

Answer 1

请考虑此工作示例http://jsfiddle.net/B4Ar6/1/

我使用Backbone.Collection在stop事件和Backbone.Model上添加新的撤消值，以保留/更新slide事件的当前滑块值。

// 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 });
});

骨干与滑块

1 个答案: