使用与骨干的把手

我正在学习Backbone / Handlebars / Require。 我已经看了所有在线和所以 – 有没有任何教程或网站，你可以指示我会提供有用的信息，而不是下划线使用句柄？

Answer 1

使用handlebars.js而不是下划线模板是非常简单的。 看看这个例子：

https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view （滚动到“加载模板”部分）

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

基本上，主干中的约定是在渲染函数中构build你的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用法。

Answer 2

我宁愿编译模板一次（在初始化过程中），这样你就避免了重新编译每个渲染模板。 此外，您需要将模型传递到编译模板以生成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; } }); 

Answer 3

如果您使用的是require.js，您将无法使用当前的Handlebars文件。 我使用了下面的Handlebars插件 ，它似乎与当前版本保持一致。 如果把手在您的模块中返回空，只需将您的Handlebars文件replace为上面的插件即可。

Answer 4

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