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

我想为日期输入应用引导日期选择器库。我使用主干网，我有模板。我已经编写了以下代码：

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

$（文档）.ready（函数（）{
$（'#date'）.datepicker（）.on（'changeDate'，函数（ev）{
$（“#日期”）.val=新日期（ev.date）；
});
});

我还包括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>

---

在呈现模板后，需要调用
日期选择器
函数并绑定处理程序，否则元素不在DOM中，无法应用日期选择器

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

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

另外，JavaScript中的选择器的ID为
date
，但模板的输入ID为
startDate
。它们都需要匹配。
您需要在呈现模板后调用
日期选择器
函数并绑定处理程序，否则元素不在DOM中，无法应用日期选择器

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

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

另外，JavaScript中的选择器的ID为
date
，但模板的输入ID为
startDate
。它们都需要匹配。
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);
});

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);
});

使用此代码

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

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

});

yourView.render();

使用此代码

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

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

});

yourView.render();

我的渲染函数现在看起来是这样的：this.$el.append（u.template（活动模板））$（'#startDate'）.datepicker（）.on（'changeDate'，function（ev）{$（'#startDate'）.val=新日期（ev.Date）；console.log（$（'#startDate'）.val（）；}）；this._modelBinder.bind（this.model，this.el）；未捕获的TypeError:Object[Object Object]没有方法“datepicker”主干。js:1081@FreeJosh您确定正确包含了插件吗？听起来好像没有加载到jQuery中。如果视图的
el
尚未添加到DOM中，您确定不需要
这个。$（“#date”）
。我只是想让我的代码成为放置的一个例子。我的
\.template
结果甚至没有被分配到任何地方。我的渲染函数现在看起来是这样的：this.$el.append（\.template（活动模板））$（'#startDate'）.datepicker（）.on（'changeDate'，function（ev）{$（'#startDate'）.val=新日期（ev.Date）；console.log（$（'#startDate'）.val（）；}）；this._modelBinder.bind（this.model，this.el）；未捕获的TypeError:Object[Object Object]没有方法“datepicker”主干。js:1081@FreeJosh您确定正确包含了插件吗？听起来好像没有加载到jQuery中。如果视图的
el
尚未添加到DOM中，您确定不需要
这个。$（“#date”）
。我只是想让我的代码成为放置的一个例子。我的
\模板
结果甚至没有分配到任何地方。