0

jquery ui とバックボーンを使用して、ズームイン ズームアウト スライダーとボタンを構築しようとしていますが、興味深い問題に遭遇しました。ズーム値を設定するモデルの仕事にしたので、ビューでそのメソッドを呼び出すだけで、値の更新を処理できますが、問題は、それを行うと遅れることです1 つ後ろ... つまり、開始値は 8 です。ズームイン ボタンを押すと、ズーム値が 9 になると思いますが、8 のままで、次にボタンをクリックすると 9 になります。 、次にクリックすると 10 になります... などですが、このラグが奇妙な問題を引き起こします。スライダーの最大値と最小値を設定したので、ズーム値がそれらの境界内に収まっていることを確認しています。しかし、あなたがそうするなら、この遅延があるからです... 最大値を1つ下回ると、それを増やすことはできませんが、ズームアウトボタンをクリックして値を減らすと、最初のクリックで値が最大値に変更され、2回目のクリックで値が変更されます15（最大値より1つ下）まで下がるので、なぜこれが起こっているのか非常に混乱しています. これに関するヘルプは大歓迎です...この問題に関連するコードを以下に含めました。私が言ったことを理解できない場合、または質問がある場合は、最善を尽くしてお答えします。この問題に関連するコードを以下に含めました。私が言ったことを理解できない場合、または質問がある場合は、最善を尽くしてお答えします。この問題に関連するコードを以下に含めました。私が言ったことを理解できない場合、または質問がある場合は、最善を尽くしてお答えします。

これらはビューです：

var SliderView = Backbone.View.extend({
    id: "slider-vertical",
    events: {
        "slidechange": "updateVal"
    },
    initialize:function(){
        this.model.on('change:zoom', this.update, this)
    },
    render: function() {
        this.$el.slider({
            orientation: "vertical",
            range: "min",
            min: 1,
            max: 16,
            value: 8,
        })
        return this; 
    },
    updateVal:function(ev){
        var val = this.$el.slider("option", "value");
        this.model.setZoom(val)
    },
    update:function(){
        this.$el.slider('value', this.model.get('zoom'))
    }
});

var ZoomInButtonView = Backbone.View.extend({
    id: "zoom-in-button",
    events: {
        "click": "update"
    },
    render: function() {
        this.$el.button();
        return this;
    },
    update: function(ev) {
        this.model.incrementZoom();
    }
});

var ZoomOutButtonView = Backbone.View.extend({
    id: "zoom-out-button",
    events: {
        "click": "update"
    },
    render: function() {
        this.$el.button();
        return this;
    },
    update: function() {
        this.model.decrementZoom(); 
    }
});

    // this is the view that handles all the events and sets everything up... and it gets called by main.js
var ZoomControllerView = Backbone.View.extend({
    el: ".wrap",

    // this renders all the sub views. 

    initialize:function(){
        this.model = new zoomModel
        this.slider = new SliderView({model: this.model}); 
        this.zoomInButton = new ZoomInButtonView({model: this.model});
        this.zoomOutButton = new ZoomOutButtonView({model: this.model});
        this.render();
    },
    render: function() {
        this.$el.append(this.slider.render().el);
        this.$el.append(this.zoomInButton.render().el);
        this.$el.append(this.zoomOutButton.render().el);
    }
});

これはモデルです：

var ZoomModel = Backbone.Model.extend({
    // we set a default start zoom of 8 
    // so it's right in the middle.
    initialize: function() {
        this.zoom = 8;
    },
    setZoom: function(val) {
        if (val > 0 && val <= 16) {
            this.set({zoom: val}); 
        }
    },
    incrementZoom: function() {
        if (this.zoom < 16) {
            this.set({zoom: this.zoom++});
        }
    },
    decrementZoom: function() {
        if (this.zoom > 1) {
            this.set({zoom: this.zoom--}); 
        } 
    }
});
4

1 に答える 1

2

「incrementZoom」および「decrementZoom」メソッドでは、値「this.zoom」は、変更する前に「this.set」メソッドに戻ります。あなたの場合の問題です。これを行うだけです：

incrementZoom: function() {
    if (this.zoom < 16) {
        this.set({zoom: ++this.zoom});
    }
},
decrementZoom: function() {
    if (this.zoom > 1) {
        this.set({zoom: --this.zoom}); 
    } 
}
于 2013-09-02T03:15:47.353 に答える