javascript - 带 Backbone 的预编译 Handlebars 内联模板

Question

当我通过将 Handlebar 模板放在单独的文件中进行外部化时，我知道如何预编译它们。最近，我一直在缩短模板并内联使用它们。例如，我有以下主干 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 加载器插件加载模板，这会很容易；例如:

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

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

查看 Github-Viewer，了解 Backbone Boilerplate 模板加载/预编译的工作示例:https://github.com/tbranyen/github-viewer