6

クライアント側のテンプレートは次のようにする必要があります (アンダースコアのテンプレート エンジンを使用):

<p class="foo"><%= bar %></p>

別の HTML ファイルまたは別の JavaScript ファイルに配置されますか? 私はそれが両方の方法で機能することを知っています。

たとえば、JavaScript ファイルには、次のような文字列変数のリストを含めることができます。

var cute = '<p class="the"><%= unicorn %></p>';
var fb   = '<p class="new-design"><%= sucks %></p>';

しかし、私は次のことも見ました：

<script type="text/template" id="omg-template">
  <span id="swag-name"><%= name %></span>
</script>

関心の分離の観点から、テンプレート ストレージはどこに属するのでしょうか?

4

4 に答える 4

4

テンプレート自体が有効な HTML であるため、 Transparencyテンプレートのような論理のないクライアント側テンプレート エンジンを使用している場合、メイン HTML に埋め込むことができます。

例：

<!-- Template -->
<div id="template">
  <span class="greeting"></span>
  <span class="name"></span>
</div>


// Data
var hello = {
  greeting: 'Hello',
  name:     'world!'
};

<!-- Result -->
<div id="template">
  <span class="greeting">Hello</span>
  <span class="name">world!</span>
</div>

テンプレートをウィジェットのような方法で使用するには、非表示の<div>コンテナーで問題ありません。

HTML 風のコードを Javascript コードブロックと Javascript 文字列に配置するのは見苦しいので、可能であれば避けるべきです。構文を強調表示できないため、エラーを簡単に見逃してしまいます。

于 2012-05-25T17:28:03.447 に答える
4

私は通常、javascript と css を連結して縮小し、クライアント側のテンプレート ファイルをグローバル変数にぶら下がっている JS 文字列に変換するアセット管理システムを使用します。この種のことはプラットフォームによって異なりますが、レールの世界では、ジャミットまたはスプロケット(現在はレールの一部です)を見たいと考えています。

まともな資産管理ができていない場合は、通常、スクリプト タグ メソッドを使用することになり、テンプレートはサーバー上で部分的に分割され、ページの下部に含まれます。作業するのはちょっと面倒ですが、単純な例の文字列テンプレート以上のものは、javascript ファイルにインラインで存在するべきではありません。

于 2011-09-24T04:54:42.173 に答える
3

次の理由から、私は 2 番目のオプションを大いに好みます。

  • 文字列を使用するということは、引用符のエスケープなどを処理することを意味します。
  • 連結なしでは複数行の文字列を使用できないため、複数行のテンプレートは Javascript では苦痛です。任意の長さのテンプレートは、複数行で読みやすくなります。
  • JS 文字列の構文の強調表示はありません。

ただし、2 番目のオプションを使用するには、テンプレート ファイルを何らかの方法で読み込むか、HTML に含めるか、ビルド時に HTML に貼り付ける必要があります。さらに、scriptタグによるデータのオーバーヘッドが増えます。また、jQuery.html()または同様の方法を使用して DOM から文字列を取得する必要があります。したがって、パフォーマンスに関しては、文字列オプションの方が優れている可能性があります。これが、ビルド時に文字列に配置するという @Matt の提案がおそらく最適な理由です。

于 2011-09-24T04:55:18.773 に答える
0

jQuery のテンプレート エンジンを使用して、すべてのテンプレートを外部の js ファイルに読み込むことができます。

于 2011-09-24T05:57:25.170 に答える