1

Handlebar テンプレートを別のファイルに入れて外部化するときに、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;
  }
});

上記を使用し、テンプレートをプリコンパイルしない場合のパフォーマンスへの影響は何ですか? 読みやすく、維持しやすいので、上記のテンプレートをセットアップすることを好みます。明らかに、テンプレートをプリコンパイルできませんか、それとも別の解決策がありますか?

ありがとう

タイロン

4

1 に答える 1

0

このほうが読みやすく保守しやすいと思うかもしれませんが、そうではありません。テンプレート/マークアップを編集するために JavaScript ファイルを開きたくありません。CSSを開いてJavascriptをデバッグしたくないのと同じです（覚えていexpression()ますか？）。

アイデアは、ビルド システムを介してテンプレートをプリコンパイルすることです。これは、requireJs ローダー プラグインを介してテンプレートをロードすると簡単になります。例えば：

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

Backbone Boilerplate が現在どのように機能しているかを確認することもできます: https://github.com/tbranyen/backbone-boilerplate (ただし、近い将来、requireJs プラグインの道に進むことについて話しました)

バックボーン ボイラープレート テンプレートのロード/プリコンパイルの実例については、Github-Viewer をチェックしてください: https://github.com/tbranyen/github-viewer

于 2013-04-29T13:29:46.753 に答える