0

ハンドルバー テンプレート内に 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>
4

1 に答える 1

4

次の 2 つのオプションがあると思います。

  1. 入力済みのテンプレートを DOM に追加した後、datepicker をバインドします。
  2. 日付ピッカーを、入力済みテンプレートの 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/

2 番目のオプションは次のようになります。

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 ラップ バージョンを使用できないことです。

于 2013-10-29T02:20:36.930 に答える