1. ホーム
  2. javascript

[解決済み] Underscoreの外部テンプレート

2022-08-29 23:08:23

質問

私は アンダースコア・テンプレート . を付けることができます。 外部ファイルをテンプレートとして添付することができます。 ?

Backbone Viewでは、私は持っています。

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

私のhtmlでは

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

うまくいきますね。しかし 外部テンプレートが必要です。 . 私は試してみてください。

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

または

textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),

または

$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })

と表示されますが、うまくいきません。

どのように解決するのですか?

編集:この回答は古く、時代遅れです。 私はそれを削除したいのですが、それは "accept"回答になっています。 代わりに私の意見を述べます。

私はもうこれを行うことを提唱しません。その代わりに、私はすべてのテンプレートを個別の HTML ファイルに分離します。 これらを非同期に読み込む (Require.js またはテンプレート キャッシュの一種) ことを提案する人もいます。 これは小さなプロジェクトではうまくいくのですが、たくさんのテンプレートがある大きなプロジェクトでは、ページロード時に小さな非同期リクエストを大量に作ってしまうことになり、私は本当に嫌です。 (うーん... Require.jsでは、r.jsで最初の依存関係をプリコンパイルすることで回避できますが、テンプレートでは、これはまだ私には間違っていると感じています)。

私は、gruntタスク(grunt-contrib-jst)を使って、すべてのHTMLテンプレートを単一のtemplates.jsファイルにコンパイルし、それをインクルードするのが好きです。 あなたは、すべての世界のベストを得ます...テンプレートはファイルに住み、前述のテンプレートのコンパイルはビルド時(実行時ではない)に起こり、ページが起動したときに100の小さな非同期リクエストを持つことはありません。

以下はすべてジャンクです。

私にとっては、テンプレートにJSファイルを含めるという単純さが好きです。 ですから、私はテンプレートを変数として含むview_template.jsと呼ばれるファイルを作成するかもしれません。

app.templates.view = " \
    <h3>something code</h3> \
";

そして、通常のファイルのようにスクリプトファイルをインクルードし、ビューで使用するのと同じくらい簡単です。

template: _.template(app.templates.view)

さらに一歩進んで、私は 実際に を使用しているので、私のコードは実際にはもっとこのように見え、行末のエスケープ文字を避けることができます。

app.templates.view = '''
    <h3>something code</h3>
'''

この方法を使うと、本当に必要でないところにrequire.jsを持ってくるのを避けることができます。