0

我正在尝试使用 jquery ui 和主干构建放大缩小滑块和按钮，但我遇到了一个有趣的问题。我已经让模型的工作来设置缩放值，因此您所要做的就是在视图中调用该方法，它会处理值更新，但问题是，当我这样做时它会滞后一个落后...我的意思是起始值为 8，您将按下放大按钮，您会认为缩放值会变为 9，但它会停留在 8，然后下次单击按钮时，它会变为 9 ，下次单击它时，它会转到 10... 等等，但是这种滞后会导致一个奇怪的问题。因为我已经为滑块设置了最大值和最小值，所以我正在检查以确保缩放值保持在这些范围内。但是因为如果你愿意的话会有这个延迟...... 它会低于最大值，并且不允许您增加它，但是如果您通过单击缩小按钮来减小该值，它将在第一次单击时将值更改为最大值，然后在第二次单击它将下降到 15（低于最大值），所以我很困惑为什么会这样。对此的任何帮助将不胜感激...我在下面包含了与此问题相关的代码。如果您不理解我所说的或有疑问...我会尽力回答。我在下面包含了与此问题相关的代码。如果您不理解我所说的或有疑问...我会尽力回答。我在下面包含了与此问题相关的代码。如果您不理解我所说的或有疑问...我会尽力回答。

这些是意见：

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 回答