javascript - 如何在不延迟的情况下设置 Backbone 模型值？

我正在尝试使用jquery ui和骨干构建一个放大缩小滑块和按钮，但是遇到了一个有趣的问题。我已经完成设置缩放值的工作，因此您要做的就是在视图中调用该方法，并处理值的更新，但是问题是，当我这样做时，它会滞后一个落后...我的意思是起始值是8，您将按下zoom in按钮，您会认为zoom值将变为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--});
        }
    }
});

最佳答案

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

关于javascript - 如何在不延迟的情况下设置 Backbone 模型值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18564428/