使用带有 Backbone 的车把

Question

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

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

基本上，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 用法。

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 在您的模块中返回 null，只需将您的 Handlebars 文件替换为上面的插件即可。

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