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

Question

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

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 加载器插件加载模板，这会很容易；例如：

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

您还可以查看 Backbone Boilerplate 现在是如何做到的：https://github.com/tbranyen/backbone-boilerplate（尽管我们谈到了在不久的将来走上 requireJs 插件之路）

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