无法访问Backbone.js中的模型

Question

我正在学习Backbone.js并遇到了一个奇怪的问题.我不确定这是否是实现这一点的正确方法.我试图在骨干视图和模型中包装一个jQuery UI Slider.但是,在滑块的滑动方法内部,我无法访问模型的值.任何帮助表示赞赏.这是我的代码:

var SliderView = Backbone.View.extend({
initialize: function(){
    console.log("Creating the slider view...");
    _.bindAll(this, 'render');
    this.render();

},

render : function(){
    console.log("Rendering the slider...");
    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        animate: true,
        range: "min",
        min: 0,
        max: 50,
        value: this.model.get('value'),
        disabled: this.model.get('disabled'),
        animate_if_programmed: true,
        slide: function( ui ) {
            console.log(model);
            this.model.set('value', ui.value);
        },
        stop: function() {
            this.check_bounds();
        }
    });
    console.log("Finished rendering...");
}
 })


var SliderModel = Backbone.Model.extend({
initialize : function(args) {
    console.log("Creating the slider model...");
},
defaults : {
    disabled : false,
    value: 8,
    position: 0
}
 });

 $(function(){
var sliderModel = new SliderModel();
var slider = new SliderView({ el: $( "#slider-vertical" ), model: sliderModel });   
 })

谢谢!

Answer 1

这是一个简单的关闭问题.slide并且stop是回调函数,所以你不能this在它们中使用并假设它指向视图类(我认为,使用jQuery UI,它可能指向你将滑块附加到的DOM元素 - "#slider-vertical").

要解决此问题,您需要在定义slide和stop函数时在范围内引用视图(或模型,如果您不需要视图本身).在您的情况下,这意味着您需要一个变量引用render():

render : function(){
    // create a reference to the view
    var view = this;
    console.log("Rendering the slider...");
    $( "#slider-vertical" ).slider({
        // ... 
        slide: function( ui ) {
            // now use it in the slide callback
            console.log(view.model);
            view.model.set('value', ui.value);
        },
        stop: function() {
            // and here, I assume
            view.check_bounds();
        }
    });
    console.log("Finished rendering...");
}