骨干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 
      });