Backbone.js 带滑块的主干

这个场景可以应用于一大堆UI小部件，但对于一个简单的示例，我将使用一个滑块（例如jQuery UI滑块）

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

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

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

我之所以要执行Model.trigger（'slideValue'，[newValue]），是因为这允许我通知所有视图模型正在更改（以便它们可以呈现此更改），但当我执行Model.set（'slideValue'，newValue）时，当滑块停止时，模型的上一个（）值可用于我的撤消功能（在滑动过程中未更改）

---

但这仍然感觉骇人听闻。有没有比模型更好的选择？TrutGeor（？）/P>< P>请考虑这个工作例子

我使用

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

//获取对滑块div的引用
var sliderDiv=$（“#滑块”）；
//获取对“撤消”按钮的引用
var undoButton=$（“#撤消”）；
//创建新模型以保存滑块值状态
var sliderValueStateModel=new（Backbone.Model.extend（））；
//创建新集合以保存滑块撤消值
var sliderValueUndoCollection=new（Backbone.Collection.extend（））；
//初始化silider
sliderDiv.slider（）；
//向集合添加初始滑块撤消值
添加（{value:sliderDiv.slider（“value”）}）；
//听“撤消”按钮，然后单击
撤消按钮。打开（“单击”，函数（）{
var模型，价值；
//如果没有撤消历史记录，则不执行任何操作
if（sliderValueUndoCollection.length<2）返回false；
//删除具有当前值的最后一个滑块撤消模型
sliderValueUndoCollection.pop（）；
//获取上一个滑块撤消模型
if（sliderValueUndoCollection.length==1）{
//在集合中保留初始值
model=sliderValueUndoCollection.first（）；
}否则{
//获取并从集合中删除该值
model=sliderValueUndoCollection.pop（）；
}
//从模型中获取滑块撤消值
value=model.get（“value”）；
//将新的撤消值保存到集合中
添加（{value:value}）；
//将新值设置为上一个滑块撤消值
滑块iv.滑块（“选项”、“值”、“值”）；
});
//收听slider中的slide事件并将值设置为模型
sliderDiv.on（“幻灯片”，功能（事件，用户界面）{
//将新滑块值保存到模型
sliderValueStateModel.set（{value:ui.value}）；
});
//收听“从滑块停止事件”并向集合添加“撤消”值
sliderDiv.on（“slidestop”，函数（事件，用户界面）{
//向集合添加新的滑块撤消值
添加（{value:ui.value}）；
});

我不同意使用事件是“骇人听闻的黑客行为”。我所有的应用程序都是专门使用基于事件的体系结构构建的。它允许每个视图完全独立，因为没有任何视图会直接操纵另一个视图。感谢您的输入，但这不是我想要的。我不希望滑块和nd撤销代码（他们两个都应该只知道模型）。我选择在“slide”上调用sliderValueStateModel.trigger（“slider”、[ui.value]），在“slidestop”上调用sliderValueStateModel.set（{value:ui.value}）。任何需要显示滑动的组件都可以侦听触发器，而其他只响应“stop”（如Undo）的组件只听变化事件。干杯。很好，为了更好的架构和支持，你也可以考虑使用<代码>事件总线或<代码>中介器< /代码>模式。你可以在这里找到例子。