骨幹js和元素

Question

我目前正在處理一個數據輸入表單，它將在輸入一些時間參數時使用。因此，我希望在項目視圖中的這些字段中使用jquery timepicker。這是我第一次嘗試與項目視圖的內部元素進行交互，我們將不勝感激。

這是我迄今嘗試過的。

<div class="grid_15 top-m"> 
     <div class="grid_16"><h3>Class Sessions</h3> <i>(eg. Period 1, Period 2 etc)</i></div> 
     <div class="grid_16"> 
     <div id="sessionlist"></div> 
     <br/><br/> 
     </div> 
     <div> 
     <a id="addses" class="top-m" href="#">Add</a> 
     <a id="removeses" class="top-m" href="#" style="display:none" >Remove</a> 
     </div> 
    </div> 

添加和刪除按鈕刪除和添加項目視圖。

<script type="text/html" id="SFTemplate"> 

<div class="editor-label"> 
<label for="Sessions[{{ count }}].Name">Session Name</label> 
</div> 
<div class="editor-field"> 
<input type="textbox" id="Sessions[{{ count }}].Name" name="Sessions[{{ count }}].Name"/> 
</div> 

<div class="editor-label"> 
<label for="Sessions[{{ count }}].StatTime">Session Start Time</label>  
</div> 
<div class="editor-field"> 
<input type="textbox" id="Sessions[{{ count }}].StartTime" name="Sessions[{{ count }}].StartTime"/> 
</div> 

<div class="editor-label"> 
<label for="Sessions[{{ count }}].EndTime">Session End Time</label>  
</div> 
<div class="editor-field"> 
<input type="textbox" id="Sessions[{{ count }}].EndTime" name="Sessions[{{ count }}].EndTime"/> 
</div> 

這對於ItemView控件

<script> 
window.CreateSession = (function() { 
    var CreateSession = {}; 

    var ses = new Array(); 
    //The next of kin item list view 
    SessionItemView = Backbone.View.extend({ 
     tagName: 'div', 
     initialize: function() { 
      //bindall 
      _.bindAll(this, 'render'); 

      this.template = _.template($('#SFTemplate').html()); 

      this.render(); 
     }, 
     render: function() { 
      $(this.el).html(this.template({ 
       count: ses.length 
      })).fadeIn(); 
      return this; 
     }, 
     remove: function() { 
      $(this.el).fadeOut('fast', function() { 
       $(this).remove(); 
      }); 
      return false; 
     }, 

     **events: { 
      "click input[type=textbox]": "placetimepicker" 
     }, 
     placetimepicker: function (e) { 
      e.el.timepicker({ ampm: true, 
        hourMin: 8, 
        hourMax: 16 
       });** 
     } 
    }); 

    function sesUpdated() { 
     if (ses.length > 0) { 
      $('#removeses').fadeIn(); 
     } 
     else { 
      $('#removeses').fadeOut(); 
     } 
    } 

    CreateSession.Init = function() { 
     $('#addses').click(function() { 
      var item = new SessionItemView(); 
      ses.push(item); 
      $('#sessionlist').append($(item.el).fadeIn('fast')); 

      sesUpdated(); 
      return false; 
     }); 
     $('#removeses').click(function() { 
      if (ses.length > 0) { 
       ses.pop().remove(); 
      } 
      sesUpdated(); 
      return false; 
     }); 
    }; 
    return CreateSession; 
})(this, this.document); 


$(function() { 
    CreateSession.Init(); 
}); 

模板

Answer 1

更多的研究和反覆試驗後，我發現我的代碼是欠缺的。

**events: { 
     "click .timepicker": "placetimepicker" 
    }, 
    placetimepicker: function() { 
     this.$(".timepicker").timepicker({ ampm: true, 
       hourMin: 8, 
       hourMax: 16 
      });** 
    } 
}); 

我把文本框類timepicker和使用「這個」關鍵字，我可以追加jQuery代碼對整個ItemView控件。

骨幹很酷。 :-D

Answer 2

很難確定你的問題。我想你的問題是爲什麼timepicker沒有初始化你的輸入。試試你的包裹事件元素的jQuery $（e.el）因爲你timepicker是一個jQuery插件：

placetimepicker: function (e) { 
     $(e.el).timepicker({ ampm: true, 
       hourMin: 8, 
       hourMax: 16 
      });