[解決済み] Underscoreの外部テンプレート
質問
私は アンダースコア・テンプレート . を付けることができます。 外部ファイルをテンプレートとして添付することができます。 ?
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を持ってくるのを避けることができます。
関連
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] razor viewエンジンでの@文字のエスケープ
-
[解決済み] HIERARCHY_REQUEST_ERR: DOM Exception 3"-Errorが発生する原因は何ですか?
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行