HTMLテンプレートをページに保存するためのベストプラクティス？

私はビルドしているサイトにかなり重いJavaScriptインターフェイスを開発しています。私は（最近作成された）公式jQuery templates pluginを使用して、自分のクエリからJSON APIへの要素を生成することにしました。現在、私が現在抱えている問題は次のとおりです。HTMLテンプレートをページに保存するためのベストプラクティス？

私はこれらのテンプレートをたくさん持っています。オブジェクトの種類ごとに1つ、リストにはいくつか、ページのセクションにはいくつかなどがあります。これらのテンプレートを保存する方法はありますか？私はテンプレート名を使用してidで<script>タグを定義した後、そこからテキストを取得しています（John Resigが "JavaScript Micro-Templating"で説明しているように）が、すべての単一ページにそれらの<script>タグがたくさんあるハッキー。

このようなシナリオでは、「ベストプラクティス」はありますか？

出典

2010-11-18 dguaraglia

ブラウザでタグ内のHTMLを解析しないようにする方法は '

私は最近このエクササイズを行っていますが、<script>タグのアプローチはちょっとハッキリしているようですが、私はこれを良い解決策として受け入れて自分のバージョンを選択しました（John Resigsのバージョンはあまりにも美味ですが、（単一項目テンプレートや行テンプレート）

0：）私自身の脳のバージョンの

私のバージョンはform##VALUE##

TEMPLATEで交換可能な値を使用して、基本的なテンプレートとの交換であります

CONTENT構築機能：

function constructFromTemplate(content, values, appendTo) { var modifiedHtml = content; modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##'); $.each(values, function (n, v) { modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v); }); if (appendTo != null) { $(appendTo).append(modifiedHtml); //initializePageElements(); } return modifiedHtml; }

USAGE

内容は、関数から返され、および/または、あなたはappendToパラメータが自動的にコンテンツをappendするelementIDを設定する設定することができます。（null〜append）

置き換え可能な値は、objectの名前が置き換え可能な項目である動的オブジェクトとして追加されただけです。

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);

注：私はこれがjQueryプラグイン、テンプレートのスタイルを初期化するために使用され、//initializePageElements();をコメントアウトしています。

のみインラインスタイルは、私はベストプラクティスのについての私のフレームワークjquery pure html templates

で正常にスクリプトを使用

出典

2010-11-18 20:57:02

ちょうど好奇心から：そのアプローチは何でしょうか？ :) – dguaraglia

DOMにコンテンツを挿入するときに動作するようには思え、さえずりの新しいインターフェイスでご覧下さいすべてのページに1つのページを使用し、 "＃！/ paths"で内部的にのみルーティングします。

ウェブアプリケーションの次の大きなステップになるためには、私はそれをウェブ3.0 :)と呼んでいます。これは、各ページにすべて同じテンプレートを持つという問題もなくなります。 1ページ。

出典

2010-11-19 23:36:04 mpapis

隠し要素にテンプレートをロードしてから、$(template).clone()を使用するのはなぜですか？それは逃げる頭痛の多くを節約します。私は.clone()対<script>のパフォーマンスについては話すことができませんが、余分なスクリプトタグはパフォーマンス上のペナルティであり、一般的にはコードが濁っていると言えます。

なぜですか？

あなたがすばらしいエスケープユーティリティを持っているにもかかわらず、間違いはまだ行われますが、読み込みがずっと難しくなります。さらに、チームの状況で作業しなければならない場合、特に人がプロジェクトをロール・オフ/ロール・オフする場合、理解しにくい場合があります。
あなたは、たとえば、templates = {}をポインタオブジェクトを作成し、そのようなあなたのクローン化可能な要素にjQueryオブジェクトのポインタでそれを読み込むことができます：あなたがしなければならないすべてを今
```
templates = {}; 
templates.message = $("#templates .message"); 
templates.dialog = $("#templates .dialog"); 
```

新しいテンプレートを作成することです：

var newDialog = templates.dialog.clone();

あなたがのparamsを受け入れるようにラッパー関数を作成し、その後、newDialog.find("title").html(title), newDialog.find("message").html(message),など

01でこれらを追加することができます

また、パフォーマンスの観点からは、今すぐテストする時間がないため、どちらが速いのか分かりません。しかし、認可されたメソッドの使用は、テンプレートが必要なコードベースで作業するときには一般的に優れていることを知っています...他の人々が最終的に関与することは避けられません。あなた自身のbadassコーディングを行う。

パフォーマンスのもう1つの重要な側面はタイミングです...パフォーマンスの遅延が発生した場合は、setTimeoutを使用して長い実行可能コードの断片を分割してください。新しいスタックを作成し、新しいスタックが作成される直前の時点まで、すでに処理されているものをブラウザにペイントさせます。これは、パフォーマンスの問題の一部として視覚的な遅延を処理する場合に非常に役立ちます（一般的に、特にノンコーダーが特によく目立つパフォーマンスの問題です）。さらに詳しい情報が必要な場合は、私にメッセージを送ってください。私はいくつかのリソースを集めます。今は限られた時間で、仕事中に火を放つ。 :)

出典

2010-11-22 20:09:21

テンプレートの目的は、テンプレートにデータを簡単に挿入することです。 DocumentFragmentをクローンすると、そのプロセスは非常に苦しくなります。私は1行のコードでテンプレートからhtmlを生成することができます。 –

.clone（）は深いメソッドです。どのように痛いでしょうか？ –

一度に1つの要素を実行することなく、どのようにマークアップにデータを挿入しますか？ –

asp.net mvcで私はよく私が必要な場所に含めることができる部分的なビューで私の共通のテンプレートをパックします。そうすれば、私はどこにでもテンプレートを繰り返す必要はありません。

もう1つの方法は、テンプレートを別々のファイルに保存することです。 newslist.tmpl.htmlのように、ajaxでテンプレートを読み込むことができます。これは、データの読み込みと並行して行うことができることを考慮すると、アプリケーションの速度を落とすべきではありません。

var strTemplate = '<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>'; 

var ST = STQuery(strTemplate); 

ST.find('h1').html('Hello'); 
ST.find('.content').html('World!'); 

var strTemplateUpdated = ST.html();

これはから、論理別々に保持します：

出典

2010-11-22 21:16:26

見https://github.com/inspiraller/STQueryで

STQueryはjqueryのと同じメソッド名のすべてではなく、DOMに要素を操作するのは、それが文字列上で直接動作します使用していますテンプレート、すなわち控えめなHTMLテンプレート

jqueryの利点は、STQueryがDOMに最初に書き込む必要がないことです。つまり、Webワーカーを使用したり、サーバー上ですべてのテンプレート操作を行うことができます。注：このメッセージの時点で、stqueryはJavaScriptで書かれているだけなので、選択したサーバー側の言語に変換する必要があります。

出典

2011-07-20 15:18:09 steve

HTMLテンプレートをページに保存するためのベストプラクティス？

関連する問題