7

私は Backbone.js アプリケーションに取り組んでいます。ビューにコンテンツをロードするために underscore.js テンプレートを使用しています。現在、すべてのテンプレートが index.html ファイル内にあるため、ファイルのサイズが増加しています。これらのテンプレートを他のファイルに分離するための解決策を見つけるのを手伝ってくれる人はいますか? 前もって感謝します。

編集

最近、バックボーン パターンを調べたところ、 JST テンプレートを使用して各テンプレートに個別のテンプレート ファイルを作成できることがわかりました。彼らは、jst.jsすべてのテンプレート コードを配置するファイルを作成できると説明しました。

// http://myapp.com/javascripts/jst.js
window.JST = {};

window.JST['person/contact'] = _.template(
    "<div class='contact'><%= name %> ..."
);

window.JST['person/edit'] = _.template(
   "<form method='post'><input type..."
);

<script src="http://myapp.com/javascripts/jst.js"></script>

これで、すべてのテンプレートがjst.jsファイルに含まれています。ただし、多数のテンプレートがあり、テンプレートを別のファイルに移動したい場合は、別のテンプレート ファイルを作成できます。 

// http://myapp.com/javascripts/jst.js
window.JST = {};

//http://myapp.com/javascripts/contactPerson.template.js
window.JST['person/contact'] = _.template(
    "<div class='contact'><%= name %> ..."
);

//http://myapp.com/javascripts/editPerson.template.js
window.JST['person/edit'] = _.template(
   "<form method='post'><input type..."
);

<script src="http://myapp.com/javascripts/jst.js"></script>
<script src="http://myapp.com/javascripts/contactPerson.js"></script>
<script src="http://myapp.com/javascripts/editPerson.js"></script>

もっと簡単なアイデアがあれば教えてください。ありがとう！

4

2 に答える 2

7

個別の html ファイルにテンプレートを含めることができ、requirejsを使用してそれらをテキストとしてロードできます。これを行うのに役立つtextというプラグインがあります。

例：

define([
  'text!templates/sampleTemplate.html'
], function(tmpl){

    var Sampleview = Backbone.View.extend({
      id: 'sample-page',

      template: _.template(tmpl),

      render: function() {
        $(this.el).html(this.template());
        return this;
     }
  });
  return SampleView;
});

HTML ファイル「templates/sampleTemplate.html」は、require.js 構成で指定されたルート パスから取得されます。

于 2013-06-11T11:23:02.850 に答える
1

経由でロードしますxhr。librequirejs (requirejs.org) は、html ファイルの依存関係をこの方法でロードします。これは開発時に機能しますが、テンプレートは本番環境で js ファイルにコンパイルする必要があります。

于 2012-04-06T00:25:29.350 に答える