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

this이보기를 DOM 요소를 의미하지 : 귀하의 경우에는, 그건 당신이 render() 내에서 변수 참조가 필요 의미합니다.

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