我正在进行的项目目前正在使用 Backbone.js 创建一个网站,并使用 Handlebars (http://handlebarsjs.com/) 作为模板系统。我正在尝试创建一个子视图,该子视图将 json 文档中的值获取到相应的模板中,然后将其返回给父视图。
我遇到的问题是当我使用
Handlebars.Compile(referenceViewTemplate)
template
然后,当我尝试使用替换令牌时,它无法识别该功能
this.template({ identifier: value })
模板代码为:
<div id="reference-template">
<div class="id">{{id}}</div>
<div class="reference">{{content}}</div>
</div>
主干模型为:
define(['underscore','backbone'],
function(_, Backbone){
var reference = Backbone.Model.extend({
initialize: function(){}
});
return reference;
});
主干集合代码为:
define(['underscore','backbone','models/reference'],
function(_, Backbone, Reference){
var References = Backbone.Collection.extend({
model: Reference,
parse:function(response){ return response; }
});
return new References;
});
调用参考视图的父视图中的代码是:
this.ref = new ReferenceView();
this.ref.model = this.model.page_refs; //page_refs is the section in the json which has the relevant content
this.ref.render(section); //section is the specific part of the json which should be rendered in the view
ReferenceView 中的代码是:
define([
// These are path alias that we configured in our bootstrap
'jquery','underscore','backbone','handlebars',
'models/reference','collections/references','text!templates/reference.html'],
function($, _, Backbone, Handlebars, Reference, References, referenceViewTemplate) {
var ReferenceView = Backbone.View.extend({
//Define the default template
template: Handlebars.Compiler(referenceViewTemplate),
el: ".overlay-references",
model: new Reference,
events:{},
initialize : function() {
this.model.bind('change', this.render, this);
return this;
},
// Render function
render : function(section) {
//this is where it says "TypeError: this.template is not a function"
$(this.el).append(this.template(References.get(section).get("content")));
return this;
}
});
我知道这需要阅读很多内容,我感谢任何抽出时间阅读的人,如果还有什么我可以提供澄清的,请告诉我。