在我的Backbone视图中,我有:
noteTemplate: _.template($('#note-template').html()),
这引发了这个错误。模板是:
<script type="text/template" id="note-template">
<div class="reminder">
<div class="reminder-hover">
<div class="title"><%= title %></div>
<div class="created">Created 3 days ago <span class="pull-right"> In 3 hours</span></div>
</div>
<span class="id" style="display: none;"><%= id %></span>
</div>
</script>
我很困惑,因为这在我的控制台中有效:
>> _.template($('#note-template').html());
function (n){return e.call(this,n,w)}
以下是完整代码:
App.Views.Index = Backbone.View.extend({
el: $("div.reminders"),
todays : $("span.today"),
tomorrows : $("span.tomorrow"),
weeks : $("span.week"),
all_times : $("span.all-time"),
noteTemplate: _.template($('#note-template').html()),
events: {
"click .reminder" : "editNote",
"click .newNote" : "newNote"
},
initialize : function() {
_.bindAll(this, 'render');
this.notes = this.options.notes;
this.listenTo(this.model, 'change', this.render);
},
render : function() {
// Hide things related to editing a note
this.$("[name=content]").hide().val("");
this.$("[name=title]").hide().val("");
this.$("save1").hide();
this.$("close1").hide();
// Fill in content
this.$el.html( this.noteTemplate( this.model.toJSON() ) );
this.$todays.html( collection.getTodays.length );
this.$tomorrows.html( collection.getTomorrows.length );
this.$weeks.html( collection.getWeeks.length );
this.$all_times.html( collection.getAllTimes.length );
return this;
},
editNote : function() {
this.goTo("notes/"+this.model.id);
},
newNote : function(){
this.goTo("newNote");
}
});
答案 0 :(得分:16)
在定义方法时,不要尝试缓存注释模板HTML,而是在初始化视图时执行此操作。
initialize : function() {
// ...
this.nodeTemplate = _.template($('#note-template').html());
}
您很有可能在加载DOM(以及模板)之前定义视图。
答案 1 :(得分:2)
另一个解决方案是将标记脚本移动到调用视图之上,就像这样(我正在使用jade)
script#page-thumb(type='text/template')
.page-thumb-container.relative
.page-thumb
.image
figure
img(src='{{ image }}' , width='80px',height='60px' , data-id='{{ id }}')
span.title {{ title }}
.page-dragger.absolute
script(src='js/src/views/PageThumbView.js')