带滑块的主干

Question

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

我有一个 jQuery 滑块，它会在 Backbone.Model “滑动”和停止时通知它。在这两种情况下，视图都会更新。 我想添加 Undo/Redo 功能来监听模型中的更改，并使用 previous() 值为每个更改创建 Undo 对象。但是，我只想在滑块停止时创建 Undo 对象，而不是在滑动期间的每次更改时创建。

因此，我需要滑块以两种不同的方式通知模型滑块值的更改，这两种方式可以通过撤消代码进行区分。

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

我这样做的原因是 Model.trigger('slideValue', [newValue]) 是这样我可以通知所有视图模型正在发生变化（这样他们就可以呈现这种变化），但是当我来到当滑块停止时执行 Model.set('slideValue', newValue)，模型的 previous() 值可用于我的 Undo 功能（在滑动过程中未更改）。

但这仍然让人觉得被黑客入侵了。有没有比 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 });
});