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...");
}

Answer 2

滑块内的

this指的是DOM元素，而不是您的视图，请事先定义您的视图/模型。

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

无法访问Backbone.js中的模型

2 个答案: