将车把与 Backbone 一起使用答案

【问题标题】：Using Handlebars with Backbone将车把与 Backbone 一起使用
【发布时间】：2012-02-22 17:54:20
【问题描述】：

我正在学习 Backbone/Handlebars/Require。我在网上和 SO 上都看过 - 是否有任何教程或网站可以指导我访问，这些教程或网站会为使用车把而不是下划线提供有用的信息？

【问题讨论】：

文档的最佳位置是 Handlebars 网站，您可以在 handlebarsjs.com 找到该网站。关于将 Handlebars 与 Backbone 一起使用，没有任何区别或额外的复杂性。唯一的区别是您必须包含 Handlebars，但除此之外，它类似于使用 Underscore 作为您的模板引擎。我希望这会有所帮助。
感谢您的帮助！我们是否还必须包含下划线，还是可以取消？
是的。下划线是 Backbone 的依赖项，因为它严重依赖它。
好的。现在有道理了。谢谢！

【解决方案1】：

使用handlebars.js 代替underscore 模板非常简单。看看这个例子：

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

基本上，骨干网的约定是在渲染函数中构建您的 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 用法。

【讨论】：

如果您希望将模板保存在单独的文件中，您将如何加载它们？我在想 sammy.js 样式，您可以在其中指定模板文件的地址 render-method?
当使用Backbone.Model或Backbone.Collection作为模板上下文时，记得使用.toJSON()
如果您已经开发了一个使用下划线作为模板引擎的应用程序，这并不是那么简单。下划线允许您在模板中编写 JavaScript 代码（当然您必须使用特殊标签），但 Handlebars 不能。
是的，@RaviHamsa，迁移将是一个不同的挑战，因为模板语言具有不同的功能。如果你想切换，建议你在 Handlebars 中编写所有新模板，直到达到临界质量，然后在重构工作中迁移旧的东西。

【解决方案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;
  }
});

【讨论】：

【解决方案3】：

如果您使用 require.js，您将无法使用当前的 Handlebars 文件。我使用了以下Handlebars Plugin，它似乎与当前版本保持同步。如果 Handlebars 在您的模块中返回 null，只需用上面的插件替换您的 Handlebars 文件。

【讨论】：

【解决方案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});

【讨论】：