Question

我知道如何通过将它们放在一个单独的文件中进行外部化来预编译我的Handlebar模板。最近，我一直在缩短我的模板并将它们内联使用。例如，我有以下Backbone View。

var ChosenVehicle = Backbone.View.extend({
  className: "car selection",

  initialize: function(options) {
    this.data = options.chosenData;
  },

  template: Handlebars.compile(
    '<h4 class="number">01</h4>' +
    '<img src="assets/img/cars/{{vehicleSlug}}.jpg" alt="{{vehicle}}">' +
    '<p class="flush">' +
      '<small class="text--center caps">' +
        '{{vehicle}}' +
      '</small>' +
    '</p>'
  ),

  render: function() {
    var chosenCar = _.find(this.model.get("cars"), function(car) {
      return car.id.toString() === this.data.vehicleId;
    }, this);
    this.$el.html(this.template(chosenCar));
    return this;
  }
});

使用上述内容而不预先编译模板的性能影响是什么？我更喜欢在上面设置我的模板，因为我发现它更容易阅读和维护。现在显然我无法预编译我的模板，还是有其他解决方案？

由于

泰龙

Answer 1

嗯，你可能认为这更容易阅读和维护，但事实并非如此。您不想打开javascript文件来编辑模板/标记;就像你不想打开CSS来调试Javascript一样（请记住expression()？）。

我们的想法是通过构建系统预编译您的模板。如果您通过requireJs加载器插件加载模板，这可能很容易; e.g：

template: require("hbs!templates/listItem")

您还可以查看Backbone Boilerplate现在如何做到这一点：https://github.com/tbranyen/backbone-boilerplate（虽然我们谈到了在不久的将来进入requireJs插件之路）

Checkout Github-Viewer获取Backbone Boilerplate模板加载/预编译的工作示例：https://github.com/tbranyen/github-viewer

带有骨干的预编译车把内联模板

1 个答案: