日期選擇器裏面的句柄模板

Question

我想弄清楚jqueryui datepicker裏面的句柄模板。到目前爲止，我有這似乎並沒有工作如下：

>  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 
>  <script> 
>   $(function() { 
>    $(".datePicker").datepicker(); 
>   }); </script> 




<script id="template-row" type="text/x-handlebars-template"> 
     <div class="returnRow{{#if altRow}} returnRow-alt{{/if}} clearfix"> 
      <input type="hidden" class="return-id" value="{{ID}}" /> 
      <input type='hidden' class='return-last-updated' value='{{LastUpdated}}' /> 
      <div class="pull-left returnRow-date"> 
       <input type="text" class="datePicker" /> 
      </div> 
      <div class="pull-left returnRow-return"> 
       <input type="text" style="width: 90%" class="return-value" onchange='SaveSingleRow(this)' value="{{textValue}}" /> 
      </div> 
      <div class="pull-left returnRow-message"> 
       <span class="row-message"></span> 
      </div> 
     </div> 
    </script> 

Answer 1

我認爲你有兩個選擇：填充的模板的DOM加入後

1. 綁定的日期選擇器。
2. 將datepicker綁定到填充模板的jQuery包裝版本，然後將該jQuery對象添加到DOM。

第一個選項是這樣的：

var t = Handlebars.compile($('#template-row').html()); 
$(something_already_in_the_dom).append(t(data)); 
$('.datePicker').datepicker(); 

演示：http://jsfiddle.net/ambiguous/w2wyU/7/

第二個方案是這樣的：

var t = Handlebars.compile($('#template-row').html()); 
var $html = $(t(data)); 
$html.find('.datePicker').datepicker(); 
$(something_already_in_the_dom).append($html); 

演示：http://jsfiddle.net/ambiguous/PMP8R/

注意這兩個選項都發生在之外模板中。根本問題是需要在一個jQuery對象上調用.datepicker，但一切只是模板中的文本，直到模板已被處理並填充之後，您才能擁有該文本的jQuery包裝版本。