日期选择器里面的句柄模板

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包装版本。