jQuery 슬라이더/백본을 통해 필드를 동적으로 업데이트하십시오.

Question

this Backbone.js 데모를 사용하여 슬라이더 위치에 따라 필드를 동적으로 업데이트하려고합니다. 그러나 updateVal 핸들러가 호출되면 DOM 요소의 .slider 속성을 인식하지 못하는 것처럼 보입니다. Backbone/js MVC 프레임 워크를 처음 사용하여 지혜의 모든 단어를 환영합니다. 여기

오류

백본 응용 프로그램

$(document).ready(function() { 
    // Initialize jquery slider 
    $("#slider").slider(); 

    // Create the model class via Backbone (which sets up things like prototype objects correctly). 
    // This particular model is a very simple one. It'll have just 1 attribute - "slidervalue" 
    var SliderModel = Backbone.Model.extend({}); 

    // A "View" abstraction for the slider. 
    // Whenever the slider position changes, this view updates the model with the new value. 
    var SliderView = Backbone.View.extend({ 
     el: $("#slider"), // Specifies the DOM element which this view handles 

     events: { 
      // Call the event handler "updateVal" when slider value changes. 
      // 'slidechange' is the jquery slider widget's event type. 
      // Refer http://jqueryui.com/demos/slider/#default for information about 'slidechange'. 
      "slidestart": "updateVal", 
      "slidestop" : "updateVal" 
     }, 

     updateVal: function() { 
      // Get slider value and set it in model using model's 'set' method. 
      console.log('SliderView.updateVal'); 
      var val = this.el.slider("option", "value"); 
      this.model.set({ slidervalue: val }); 
     } 
    }); 

    // The listener "View" for the model. 
    // Whenever the model's slidervalue attribute changes, this view receives the updated value. 
    var ValueView = Backbone.View.extend({ 
     initialize: function (args) { 
      // _.bindAll is provided by underscore.js. 
      // Due to some javascript quirks, event handlers which are bound receive a 'this' 
      // value which is "useless" (according to underscore's docs). 
      // _.bindAll is a hack that ensures that 'this' in event handler refers to this view. 
      _.bindAll(this, 'updateValue'); 


      console.log('ValueView.initialize'); 

      // Bind an event handler to receive updates from the model whenever its 
      // 'slidervalue' attribute changes. 
      this.model.bind('change:slidervalue', this.updateValue); 
      console.log(this); 
     }, 

     updateValue: function() { 

      // Get the slider value from model, and display it in textbox. 
      console.log('ValueView.updateValue'); 

      // this.model won't work unless "_.bindAll(this, ...)" has been called in initialize 
      var value = this.model.get('slidervalue'); 
      console.log(value); 
      $("#sliderVal").val(value); 
     } 
    }); 

    // Create the instances 
    var sliderModel = new SliderModel; 
    var sliderView = new SliderView({ model: sliderModel }); 
    var valView = new ValueView({ model: sliderModel }); 
}); 

HTML

<!-- "slider" is a jquery slider --> 
    <div id="slider"></div> 

    <!-- "sliderVal" displays the slider's position. It receives the value via model. --> 
    <input type="text" id="sliderVal" value="0"/> 

Answer 1

의 스크린 샷입니다 시도해보십시오.

var val = this.$el.slider("option", "value"); 

View.el은 실제 DOM 개체 인 View입니다. $ el은 jquery 개체에 래핑됩니다.