13

更新:この問題をさらに 1 日掘り下げた結果、現在の jQuery テンプレート ライブラリにはこれを行う方法がないことがわかりました。この記事で は、適切なアプローチについて説明します。

これを行うことに関する追加の考えを聞きたいと思います。上記の記事では、返されたテンプレートの文字列を DOM に挿入する必要があります。これからDOMを除外するのが理想的であり、ブラウザのオーバーヘッドが少なくなるようです。使用されない可能性のある複数の複合テンプレートを含む大きなページを想像してください。ただし、テンプレートが script タグでラップされているためか、テンプレートごとに DOM 項目が 1 つしかないのでしょうか? さあ、いくつかの考えを聞いてみましょう...

jQuery template libsを使用して、複数の関連する比較的小さなテンプレートを組み合わせる最良の方法は何ですか? <script>個々のテンプレートごとに 1 つのタグが必要ですか? これらのテンプレートを AJAX 経由で動的にプルする場合はどうでしょうか? これらのテンプレートを何らかの方法で組み合わせることができますか?

次の点を考慮してください。

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}}
    <tr class="detail"><td>Director: ${Director}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr>
</script>

これら 2 つのテンプレートは非常に密接に関連しているため (一方が他方に依存しているため)、これらを 1 つの AJAX 呼び出しに統合し、両方を一度に取得することは理にかなっています。いくつかのアイデアがありますが、これを行うための一般的な/最良の方法があるかどうか知りたいですか? 現在、私は HTML のチャンクを取り込み、.find() を実行して、テンプレート用の HTML の特定のピースを取得します... 例:

var templatePackage = fancyAjaxCalltoGetTemplates();

「templatePackage」は次のようになります。

<div id="templatePkg"> 
    <div id="movieTemplate">
    {{tmpl "#titleTemplate"}}
      <tr class="detail"><td>Director: ${Director}</td></tr>
    </div>    

    <div id="titleTemplate">
    <tr class="title"><td>${Name}</td></tr>
    </div>
</div>

次に、次のことができます。

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate') );

と

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate') );

...あなたの考えを教えてください...どうしますか?

4

4 に答える 4

4

テンプレートを DOM に挿入しない限り、テンプレートをキャッシュできないという前提を除けば、あなたの更新で参照されている記事が気に入っています。jQuery.tmplのドキュメントから、

"(ページ内のインライン マークアップからではなく) 文字列から取得されたマークアップを使用するときにテンプレートをキャッシュするには、$.template( name, markup )再利用のために名前付きテンプレートを作成するために使用します。jQuery.template()を参照してください。"

これを使用して、DOM をきれいに保ちながら、一度に必要な数のテンプレートをロードできる JavaScript テンプレート管理システムを構築できます。クライアントで、テンプレート オブジェクトのハッシュを名前別に保持します。ここでお気に入りのオブジェクト ベースの JavaScript パターンを使用できますが、構造は次のようになると思います。

templates[templateName] = {
    templateMarkup: markupFromServer,
    loadedAt: Date.now(),
    compiledTemplateFunction: jQuery.template( templateName, markupFromServer )
}

次に、テンプレートを使用して、次のような HTML を生成します。

templates['unique-name'].compiledTemplateFunction(inputData)

次に、アンロード メカニズムを構築してメモリを解放します。

function unload(templateName) {
    delete templates[templateName];
    delete jquery.template[templateName];
}

最も重要なことは、複数のテンプレートを保存する方法があるため、次のような要求を行うことができるということです:$.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess)一度に複数のテンプレートをロードする. TemplateManagement必要なのは、テンプレート名の配列を入力として受け取り、テンプレート名とそのマークアップを組み合わせた JSON を返すコントローラーだけです。これを行うにはいくつかの方法がありますが、最も便利なのは各テンプレートの部分ビューを定義することです。ASP.NET MVC 3 では、この手法を使用RenderPartialして、各テンプレートのマークアップを JSON 応答に出力できます。部分ビューにテンプレートと同じ名前を付けるか、独自の方法で名前をマッピングできます。

于 2011-06-28T15:01:05.577 に答える
2

[まず、素晴らしい質問です。私はこのトピックが大好きです]

私はプラグイン「jquery-template-libs」の経験はありませんが、ほぼ標準になりつつある特定の軽量の JavaScript テンプレート プラグインがあり、jQuery と非常にうまく連携します。これはおそらく JTL よりもタスクに適しているでしょう。Mustache:

https://github.com/janl/mustache.js

「部分」と呼ばれるものがあります。これは本質的に、小さなテンプレートを別のテンプレートに含める方法です。それはあなたを大いに助けてくれるように聞こえます。

その上に、ICanHaz.js というライブラリがあります。

http://icanhazjs.com/

ICanHaz は基本的に Mustache を拡張して、テンプレート用の組み込み機能を組み込み、非常にうまく機能します。

Mustache/ICanHaz では、変数、json 呼び出し、またはタグを使用してテンプレートを追加できます。選択はあなた次第です。

于 2011-02-10T23:03:24.303 に答える
2

OK、この投稿で参照している記事を読みました。私が見たところ、彼の方法はおそらくテンプレート ページをロードする最良の方法の 1 つです。私が気に入らない唯一のことは、特に発生する可能性のある非同期の問題です。async get が返される前にすぐにテンプレートを作成する必要がある場合...さらに、何かを返す前に発生する可能性のあるバインディングの問題。私が行ったいくつかのプロジェクトでは、彼の「古代の」SSI（サーバー側を含む）を使用していますが、次のようなさらに簡単なものを使用しています。

<% Response.WriteFile("this_page_template_file.html"); %>

タグを配置する場所ならどこにでも配置できます。彼が言うように、必要なテンプレートだけを入れるか、2 つのテンプレートを含めることができます。 .

これは答えに近いですか？;-)

于 2011-01-04T21:26:47.100 に答える
0

これは古い質問ですが、Closure-Templatesをご覧になることをお勧めします。これらは、各ユーザーのブラウザーでの実行時ではなく、コンパイル時に JavaScript にコンパイルされるという追加の利点を備えた、必要な種類の機能を提供します。

それらの使用を検討することにした場合は、それらを構築するためにplovrを使用することをお勧めします。

于 2011-06-28T14:05:04.733 に答える