2

このシナリオは多くの UI ウィジェットに適用できますが、簡単な例として、スライダー (jQuery UI スライダーなど) を使用します。

Backbone.Model が「スライド」したときと停止したときに通知する jQuery スライダーがあります。ビューはどちらの場合も更新されます。モデルの変更をリッスンする Undo/Redo 機能を追加し、previous() 値を使用して変更ごとに Undo オブジェクトを作成したいと考えています。ただし、スライド中のすべての変更ではなく、スライダーが停止したときに Undo オブジェクトを作成したいだけです。

そのため、元に戻すコードで区別できる 2 つの異なる方法で、スライダー値の変更をモデルに通知するスライダーが必要です。

現時点では、スライド中に Model.trigger('slideValue', [newValue]) を実行しており、ビューはこのトリガーをリッスンして更新します。次に、スライダーが停止したら、Model.set('slideValue', newValue) を実行します。元に戻す機能は、これらの変更イベントをリッスンして、新しい元に戻すオブジェクトを作成し、キューに追加します。

私が Model.trigger('slideValue', [newValue]) を実行している理由は、これにより、モデルが変更されていることをすべてのビューに通知できるためです (したがって、この変更をレンダリングできます)。 set('slideValue', newValue) スライダーが停止すると、元に戻す機能でモデルの previous() 値を使用できます (スライド中に変更されていません)。

しかし、これはまだひどくハッキングされているように感じます. Model.trigger() に代わるより良い方法はありますか?

4

1 に答える 1

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 });
});
于 2014-01-15T23:30:00.507 に答える