2010-12-10 10 views
13

更新:この問題に を掘るの別の日の後、私は 現在のjQueryのテンプレートlibには、これを行うに 方法を提供していませんことを見出しました。 this article には、良いアプローチが記載されています。単一のxHttpRequestで複数のjQueryテンプレートをパッケージ化する最も良い方法は?

私はまだこれを行うことについて の意見を聞きたいと思います。上記にリンクされた の記事では、返されたテンプレートの文字列 が がDOMに挿入されている必要があります。 DOMをこれから離しておくと、 のように見え、 ブラウザでは、理想的で、オーバーヘッドが少なくなります。多くの複合テンプレートが の大きなページを想像してください。 は使用されません。 テンプレートはスクリプト タグにラップされているため、1つのテンプレートには1つのDOMアイテムしかありません。さあ、の は、いくつかの考えを聞いてみましょう... jQuery template libsを使用して

、一緒に複数の、関連する、比較的小さなテンプレートを組み合わせるための最良の方法は何ですか?個別のテンプレートごとに単一の<script>タグが必要ですか?これらのテンプレートをAJAX経由で動的に引き出す場合はどうでしょうか?どういうわけかこれらのテンプレートを組み合わせることはできますか?

次のことを考えてみましょう。単一のAJAX呼び出しにこれらを統合しても意味があり、それらの両方になるだろうこれらの2つのテンプレートが非常に密接に関連しているので、

<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> 

(一方が他方に依存します)一度。私はいくつかのアイデアを持っていますが、これを行うための共通の/最良の方法があるかどうかを知りたいのですが?例えば...現在私は、HTMLのチャンクに引き、その後、テンプレートのHTMLの特定peiceを取得するために).findを(実行します

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')); 

...あなたの考えを知りましょう...あなたは何をしますか?

+0

デリミタを使用して、単一の応答からテンプレートのグループを分割することもできます。 jquery/templatesを使ってこれを行うには、よりエレガントな方法が必要です。テンプレートドキュメントから何かが欠けていますか? – user406905

+0

私はあなたにここに従っています...レンダリングされたページにすべてのテンプレートをロードしてから、必要な数だけを選択するという問題を回避しようとしていますか? –

+0

そうです。必要に応じてテンプレートを動的に読み込む必要があります。 – user406905

答えて

2

[OK]をクリックして、この記事で参照している記事を読んでください。私が見ているように、彼のやり方はおそらくテンプレートページをロードする最良の方法の1つです。私が気に入らないのは、非同期の問題です。非同期取得が返される前にすぐにテンプレートを作成する必要がある場合は、何かを返す前に起こりうるバインディングの問題を加えます。いくつかのプロジェクトでは、私は彼の「古代」SSI(サーバー側が含まれる)を使用して行われているが、私はちょうどより簡単のようなものを使用します。あなたがタグを配置したい場所をあなたはどこにでも置くことができ

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

。彼が言うように、必要なテンプレートだけを入れるか、または2つのテンプレートを含めることができます.1つは一般的に使用される「基本」テンプレートで、もう1つはテンプレート参照{{tmpl}}を持つページ固有のテンプレートです。

これは回答に近いですか? ;-)

+1

あなたは何をやったのですか?あなたのサーバーのサイドページは、テンプレートファイルを決定し応答します。私もこの問題のための良い、きれいな解決策を探しています – Vin

+0

私はまだいませんが、私は後で戻って、後で設計するつもりです。私はそれが私がその特定のページに必要なものだけを読み込むことができるものにしたいですが、今はパフォーマンスが十分であり、うまく機能しているだけでエレガントではありません。私の言っていることが分かるよね? –

2

[最初に、大きな質問です。私はこのトピックが大好きです]

私はプラグイン "jquery-template-libs"の経験はありませんが、ほとんどの標準となっている軽量のjavascriptテンプレートプラグインがあり、おそらくjQueryでうまくいきますJTL、口ひげよりタスクに適し:

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

それは基本的に別の1つの中に小さいテンプレートを含める方法である「部分的」と呼ばれるものを持っています。どのような音があなたを助けてくれるでしょうか。

http://icanhazjs.com/

ICanHazは、基本的にテンプレートの機能が内蔵され、よく信じられないほどの作品含めるように口ひげを拡張:ICanHaz.jsと呼ばれるライブラリがあるその上で

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

0

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

あなたがそれらを調べることに決めたら、私はplovrを使ってそれらを構築することをお勧めします。

4

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

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

これを使用すると、DOMをきれいに保ちながら、必要なだけ多くのテンプレートを一度に読み込むことができるjavascriptテンプレート管理システムを構築できます。クライアントでは、テンプレートオブジェクトのハッシュを名前で保存します。あなたがここにjavascriptのパターンベースのお気に入りのオブジェクトを使用することができますが、私は構造がこのようなことができると思います。このようなHTMLを生成するためのテンプレートを使用すると

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

:次に

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

を構築メモリを解放するための機構をアンロード:LOに$.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess):あなたのような要求を行うことができるように

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

最も重要なのは、あなたが今、複数のテンプレートを保存する方法を持っています一度に複数のテンプレートを広告します。必要なのはコントローラTemplateManagementで、テンプレート名の配列を入力として受け取り、テンプレート名とそのマークアップをペアにするJSONを返します。これを行うにはいくつかの方法がありますが、最も便利なのは各テンプレートの部分的なビューを定義することです。 ASPで。NET MVC 3では、this techniqueRenderPartialを使用して、各テンプレートのマークアップをJSONレスポンスに出力できます。テンプレートと同じパーシャルビューに名前を付けることも、カスタムの方法で名前をマッピングすることもできます。

+0

yay、:: pats self on back ::これは私の好きな答えです。それはいつかキャッチするつもりだ、それはより良い場所に世界を作るでしょう:) – Milimetric

+0

これは私が取るだろうアプローチとまったく同じです。もう一度自分自身にパットする=) –

+1

:)完了。そして、ありがとう、私はStackOverflowが大好きです。 – Milimetric

関連する問題