车把模板中的Datepicker [英] Datepicker inside a handlebars template
问题描述
我正在尝试找出一种将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>
我认为您有两个选择:
- 将填写好的模板添加到DOM后,绑定日期选择器.
- 将日期选择器绑定到已填充模板的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/
请注意,这两个选项都在模板的 位置进行.潜在的问题是.datepicker
需要在jQuery对象上调用,但是所有内容仅是模板中的文本,在处理并填写模板之前,您无法拥有该文本的jQuery包装版本.>
I am trying to figure out a way to have jqueryui datepicker inside handlebars template. So far I have the following that doesn't seem to work:
> <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>
I think you have two options:
- Bind the datepicker after adding the filled-in template to the DOM.
- Bind the datepicker to a jQuery-wrapped version of the filled-in template and then add that jQuery object to the DOM.
The first option looks like this:
var t = Handlebars.compile($('#template-row').html());
$(something_already_in_the_dom).append(t(data));
$('.datePicker').datepicker();
Demo: http://jsfiddle.net/ambiguous/w2wyU/7/
The second option looks like this:
var t = Handlebars.compile($('#template-row').html());
var $html = $(t(data));
$html.find('.datePicker').datepicker();
$(something_already_in_the_dom).append($html);
Demo: http://jsfiddle.net/ambiguous/PMP8R/
Note that both options take place outside the template. The underlying problem is that .datepicker
needs to be called on a jQuery object but everything is only text inside the template, you can't have a jQuery wrapped version of that text until after the template has been processed and filled in.
这篇关于车把模板中的Datepicker的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!