我正在学习Backbone/Handlebars/Require。我已经在网上和Stack Overflow上搜索了很多 - 你能给我指引一些教程或网站,为使用handlebars而不是underscore提供有用的信息吗?
我正在学习Backbone/Handlebars/Require。我已经在网上和Stack Overflow上搜索了很多 - 你能给我指引一些教程或网站,为使用handlebars而不是underscore提供有用的信息吗?
使用 handlebars.js
替代 underscore
模板是相当简单的。请查看以下示例:
https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view (滚动到“Loading a Template”一节)
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#search_template").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.el.html( template );
}
});
在Backbone中,通常的惯例是在一个渲染函数中构建你的HTML。使用模板引擎完全由你自己决定(这也是我喜欢Backbone的原因)。所以你只需要将它改为:
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
// Compile the template using Handlebars
var template = Handlebars.compile( $("#search_template").html() );
// Load the compiled HTML into the Backbone "el"
this.el.html( template );
}
});
由于你正在使用 require.js
,所以可以将 Handlebars
作为模块的依赖项放在顶部。我对此还比较新,但听起来需要关注的是 Backbone.js
模式和 require.js
的用法。
我希望在初始化时只编译一次模板,这样就避免了每次渲染时重新编译模板。此外,你需要将模型传递给已编译的模板,以生成HTML:
SearchView = Backbone.View.extend({
initialize: function(){
// Compile the template just once
this.template = Handlebars.compile($("#search_template").html());
this.render();
},
render: function(){
// Render the HTML from the template
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
如果您正在使用require.js,您将无法使用当前的Handlebars文件。我使用了以下Handlebars插件,它似乎与当前版本保持更新。如果Handlebars在您的模块中返回null,请使用上述插件替换您的Handlebars文件。
define(["app", "handlebars",
"text!apps/templates/menu.tpl"
], function (app, Handlebars, template) {
return {
index: Marionette.ItemView.extend({
template: Handlebars.compile(template),
events: {
'click .admin-menu-ref': 'goToMenuItem'
},
goToMenuItem: function (e) {
//......
}
})
}
});
new view.index({model: models});