Question

我想为日期输入应用bootstrap datepicker库。我正在使用骨干，我有模板。我写了以下代码：

 <script>
     $(document).ready(function() {
         $('#date').datepicker().on('changeDate', function(ev) {
             $('#date').val = new Date(ev.date);
         });
     });
 </script>

我也包含了datepicker库。我想在模板上应用它：

<script type="text/template>
    <div class="control-group">
        <label class="control-label" for="startDate">Start Date</label>
        <div class="controls">
            <input type="text" class="input-xlarge datepicker" id="startDate"  value="02/16/12" />
        </div>
    </div>
</script>

但是，这段代码不起作用。如果我在模板外部应用我的HTML代码，那么它将起作用，但在模板中它不起作用。

任何帮助将不胜感激。

Answer 1

使用此代码

var yourView = Backbone.view.extend({
   my_template: "#your-template",
....

render: function() {
   _.template(my_template, my_data);
setTimeout(function() {
        $('#date').datepicker()
    },0);
}
...

});

yourView.render();

Answer 2

您需要在呈现模板后调用datepicker函数并绑定处理程序，否则该元素不在DOM中以应用datepicker。

，例如，在View的render函数中看起来像这样：

_.template(my_template, my_data);
$('#date').datepicker().on('changeDate', function(ev) {
    $('#date').val = new Date(ev.date);
});

此外，JavaScript中的选择器的ID为date，但您的模板输入的ID为startDate。他们都需要匹配。

Answer 3

View.render（）返回视图的HTML，但尚未在DOM上呈现。因此，您应该将模板放在render函数中，并在调用render（）后初始化插件。我没有测试过，但是多次这样做...... :) ..所以，这只是为了给你一个想法......

var yourView = Backbone.view.extend({
   my_template: "#your-template",
....

render: function() {
   _.template(my_template, my_data);
}
...

});

yourView.render();

$('#date').datepicker().on('changeDate', function(ev) {
    $('#date').val = new Date(ev.date);
});

JavaScript在backbone.js中的文本模板中不起作用

3 个答案: