無法在Backbone.js中訪問模型

Question

我目前正在學習Backbone.js並遇到一個奇怪的問題。我不確定這是否是實施這個的正確方法。我試圖在骨幹視圖和模型中包裝一個jQuery UI滑塊。但是，在滑塊的滑動方法中，我無法訪問模型的值。任何幫助表示讚賞。這裏是我的代碼：

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

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(); 
    } 
}); 

Answer 2

這是一個直截了當的關閉問題。 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..."); 
}