Backbone和jQuery滑塊

所以我一直在努力爭取做到這一點。我正在構建一個動態表單生成器工具。其中一個功能是用戶應該能夠使用jQuery滑塊來選擇字體大小。我使用Underscore模板爲滑塊創建div。所以每次用戶選擇一個標籤輸入，這個下劃線模板被加載，我調用slider（）fn來初始化它。這裏的是，因此，這是否Backbone和jQuery滑塊

UnderscoreTemplate

<!-- template for plain text inpt to be shown in form generate --> 
    <script type="text/template" id="text-generate-template">  
     <div class="row">  
      <div class="col-sm-10"> 
       <input type="text" placeholder="Enter text here" class="label-name form-control" value="<%=model.get('label')%>"> 
      </div>    
      <button type="button" class="close" id="remove-element" >&times;</button> 
     </div>   
     <div class="row col-sm-6" style="margin-top:10px"> 
      <div id="slider-<%=model.cid%>"></div> 
      <small>Font Size: <%=model.get('fontSize')%>px </small>    
     </div> 
    </script>

按代碼ablove，每個動態加載元件具有一個唯一的ID的唯一滑塊的代碼的一部分。

的骨幹型從所謂的「元素」

var TextElement = Element.extend({ 
      defaults:function(){ 
       return _.extend({}, Element.prototype.defaults,{ 
        name: 'PlainText', 
        generateTemplateType: 'text-generate-template', 
        previewTemplateType:'text-template', 
        textAlign: 'center'  
       }); 
      }        
     });

視圖負責生成HTML基礎元件延伸。

var ElementView = Backbone.View.extend({ 

      tagName: 'li', 
      events : {    

       }, 
      initialize : function(){ 
       this.listenTo(this.model,'change', this.render);   
       this.render(); 
      }, 
      render : function(){        
       var htmlContent = $('#'+this.model.get('generateTemplateType')).html();       
       var content = _.template(htmlContent, {elementType : elementTypes, model : this.model});          
       this.$el.html(content);   
       me = this;     
       if(this.model.get('name') == 'PlainText'){      
        this.$el.find('#slider-'+this.model.cid).slider({ 
         min: 10, 
         max:40, 
         step: 1, 
         value:me.model.get('fontSize') > 9 ? me.model.get('fontSize') : 24, 
         change: function(event, ui) { 
          me.slide(event, ui.value); 
         } 
        }); 
       } 

       return this; 
      },    

      slide: function(event, index){     
       console.log("the models id in slide function -> "+this.model.cid); 
       this.model.set('fontSize', index);     
      } 
     });

因此，我在這裏做的是，每次我檢測到更改後，我將此模型的fontSize更新爲通過Slider傳入的新值。

此模型所屬的集合可以識別這種變化並將其自行重新渲染。

當頁面上只有一個這樣的元素時，一切正常。當用戶添加多個元素並嘗試更改每個項目的字體大小時，只更改最後一個元素的字體大小。無論我是否滑動第一個，第二個或第三個元素，它都會將更改設置爲集合中的最後一個模型，並且最後一個模型會使用不正確的字體大小值重新渲染。

我試着在幻燈片函數中記錄模型的控制檯的id，無論我使用哪個滑塊，它總是返回最後的模型ID。

我在做什麼錯在這裏？

來源

2014-02-13 user2317577

你有一個意外的全局變量就在這裏：

me = this;

這樣做的副作用是，ElementView每個實例將結束完全相同共享相同me和me將是你實例最後ElementView。聽起來有點熟？

的解決方案是使用一個局部變量：

var me = this;

，或者，如果你不需要滑塊的this回調裏面，改爲使用綁定功能：

value: this.model.get('fontSize') > 9 ? this.model.get('fontSize') : 24, 
change: _(function(event, ui) { 
    this.slide(event, ui.value); 
}).bind(this)

你可以如果您比_.bind更喜歡那些，也可以使用$.proxy或Function.prototype.bind。

來源

2014-02-13 18:58:48

Backbone和jQuery滑塊

回答

相關問題