現時点では、4 つのテンプレートを含む 1 つの HTML ページがあり、さらに多くのテンプレートが含まれます。テンプレートを別のファイルに入れて「インポート」することはできますか? それらを .js ファイルで定義できますか?
jQquery テンプレート プラグインを使用しています: http://api.jquery.com/category/plugins/templates/
私のコードは例のように見えます!
現時点では、4 つのテンプレートを含む 1 つの HTML ページがあり、さらに多くのテンプレートが含まれます。テンプレートを別のファイルに入れて「インポート」することはできますか? それらを .js ファイルで定義できますか?
jQquery テンプレート プラグインを使用しています: http://api.jquery.com/category/plugins/templates/
私のコードは例のように見えます!
私はこの回答のスピンにほとんど同意します: HTMLテンプレートを保持する場所は? KISSの原則 により、あなたはすでに正しいことをしています。
最終的に作成するテンプレートの数 (「さらに多く」と述べました) に応じて、それらをメイン ページから分離することをお勧めします。これにはいくつかの理由があります。
理由の 1 つは、やはり KISS の原則です。テンプレートが多すぎると、ソース コードをナビゲートするのが難しくなる可能性があります。エディターまたは IDE では、これについて既に説明している場合があります。そうでない場合は、テンプレートを別のファイルに入れる良い理由になるかもしれません。
もう 1 つの理由は、パフォーマンスのためです。テンプレートを使用せずに HTML ファイルを単独で提供すると、ページがクライアントに到着し、はるかに早くレンダリングが開始されます。クライアントがいくつかのテンプレートをキャッシュし、変更されたときにのみ新しいテンプレートをロードすることを許可することもできます。これにより、サイトへの今後の訪問がはるかに高速に初期化されます。
パフォーマンスが特に重要な場合は、2 つのアプローチの組み合わせを検討してください。メインの HTML ページに、ページの基本構造を組み立てる重要なテンプレートを含めます。次に、オプションのテンプレートは、ページの読み込み後および/または必要になる直前に取得できます。必須のテンプレートを含めるには、サーバー側のテンプレートを使用できます。
あなたの最初の質問に関して、それらをどこに保管するかについては、あなたにとって意味のある場所に置くべきだと言います. 次に、テンプレートを作成してフェッチする方法については、jQuery テンプレートでの外部テンプレートの使用に関する Dave Ward の記事を参照してください。コードの重要なスニペットは次のとおりです。
// Asynchronously our PersonTemplate's content.
$.get('PersonTemplate.htm', function(template) {
// Use that stringified template with $.tmpl() and
// inject the rendered result into the body.
$.tmpl(template, person).appendTo('body');
});
次に、Stephen Walther 著の「jQuery テンプレートの紹介」を参照して、「リモート テンプレート」というタイトルのセクションにジャンプしてください。彼は、テンプレートを一度だけフェッチしてコンパイルする例を持っていますが、複数回レンダリングすることを可能にします。重要なスニペットは次のとおりです。
// Get the remote template
$.get("ProductTemplate.htm", null, function (productTemplate) {
// Compile and cache the template
$.template("productTemplate", productTemplate);
// Render the products
renderProducts(0);
});
function renderProducts() {
// Get page of products
var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5);
// Used cached productTemplate to render products
$.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer");
}
このスタックオーバーフローの質問をチェックしてください。ここにはたくさんの例があります編集: JQueryの推奨JavaScript HTMLテンプレートライブラリが古い可能性がありますか?
また、外部テンプレート ファイルの使用に関する最近の記事: http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/
.NETを使用していない場合に、これが役立つかどうかはわかりません。しかし、私は同じ問題を抱えており、それを行うためのコードをいくつか作成しました。
これは基本的にパスに移動し、すべてのhtmlファイルをコピーして貼り付け、スクリプトtype = "text/x-jquery-tmpl"の部分を添付します。
これをさらに自動化する必要がある場合は、html/aspxファイルの本文にテンプレートを追加する他のコードを次に示します。
必要なHTTPリクエストの量が多いため、外部テンプレートメソッドは好きではありません。理想的には、ページに一度ダウンロードして、テンプレートを忘れることができます。Asp.netを使用している場合は、これをMasterPageに配置できます:)
お役に立てば幸いです
チー