0

我想应用引导日期选择器库进行日期输入。我正在使用主干，我有模板。我写了以下代码：

 <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 代码，那么它将起作用，但在模板中它不起作用。

任何帮助将不胜感激。

4

3 回答 3

2

使用此代码 

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

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

});

yourView.render();
于 2014-10-08T10:21:30.273 回答
1

您需要datepicker在渲染模板后调用该函数并绑定处理程序，否则该元素不在 DOM 中以应用日期选择器。

render例如，它在您的视图函数中看起来像这样：

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

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

于 2013-06-19T12:11:44.963 回答
0

View.render() 正在返回视图的 HTML，并且尚未在 DOM 上呈现。因此，您应该将模板放在渲染函数中，并在调用 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);
});
于 2013-06-19T14:09:18.263 回答