Question

我正在尝试使用jquery ui和backbone建立一个缩放缩小滑块和按钮，但我遇到了一个有趣的问题。我已经让它成为模型的工作来设置缩放值，所以你要做的就是在视图中调用该方法，它处理值更新，但问题是，当我这样做时它会滞后一个落后......我的意思是起始值是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--}); 
        } 
    }
});

Answer 1

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

如何设置骨干模型值而不延迟？

1 个答案: