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

Question

我想爲日期輸入應用引導日期選擇器庫。我正在使用主幹，我有模板。我寫了以下代碼：

<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

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

Answer 2

您需要調用datepicker函數並在呈現模板之後綁定處理程序，否則該元素不在DOM中以將日期選擇器應用於。

例如，它看起來像這樣在你查看的render功能：

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

此外，您在JavaScript選擇是對的date的ID，但你的模板的輸入有startDate的ID。他們都需要匹配。

Answer 3

使用此代碼

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

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

}); 

yourView.render();