web-dev-qa-db-ja.com

JQueryに推奨されるJavaScript HTMLテンプレートライブラリは？

どのHTMLテンプレートライブラリがJQueryに適しているかについての提案はありますか？グーグルはかなりの数のライブラリーを見つけましたが、時の試練に耐えるよく知られたライブラリーがあるかどうかはわかりません。

javascriptjquerytemplates
89
Shiva

さて、率直に言って、クライアント側のテンプレートは最近非常に暑いですが、かなりジャングルです。

最も人気のあるものは、私は信じています：

  • 純粋 ：jsのみを使用し、独自の「構文」は使用しません
  • 口ひげ ：非常に安定していていいと聞きました。
  • jqote2 ：jsperfsによると非常に高速
  • jqueryテンプレート（非推奨）：

他にもplentyがありますが、自分に合ったものを確認し、プロジェクトスタイルに最適なものを確認する必要があります。

個人的には、新しい構文と一連のロジック（ロジックとテンプレートの混合、hello ??）の追加に苦労し、純粋なjsになりました。私のテンプレートはすべて、独自のhtmlファイル（./usersTable.row.html）に保存されます。テンプレートを使用するのはコンテンツをajaxする場合のみで、テーブル用、div用、リスト用の「ロジック」jsファイルはほとんどありません。また、selectのオプション用ではありません（別の方法を使用する場合）。

より複雑なことをしようとするたびに、コードは「古い」方法で行うよりも明確でなく、安定するのに時間がかかることがわかりました。私の意見では、テンプレートのロジックはまったくナンセンスであり、独自の構文を追加してもトレースが非常に難しいバグしか追加されません。

58
roselan

jTemplates

javaScriptのテンプレートエンジン。

jQuery ...へのプラグイン.

特徴：

  • JavaScriptで100％
  • プリコンピレーター
  • JSONをサポート
  • Ajaxを使用する
  • テンプレート内でJavaScriptコードの使用を許可する
  • カスケードテンプレートの作成を許可する
  • テンプレートでパラメーターを定義できるようにします
  • ライブ更新！ -サーバーからのコンテンツの自動更新...
14
redsquare

このトピックに関する合理的なディスカッションドキュメントがあります here 。テンプレートツールの範囲をカバーしています。ただし、jQueryに固有ではありません。

8
Marc Gravell

jQuery Templates Plugin Microsoftによって作成され、公式jQueryプラグインとして受け入れられました。

ただし、現在は廃止されていることに注意してください。

5
Andrey

json2html を確認します。HTMLスニペットを記述する必要はなく、代わりにJSON変換に依存してJSONオブジェクト配列を非構造化リストに変換します。非常に高速で、DOM作成を使用します。

4
Chad Brown

数年前、私はIBDOMを構築しました： http://ibdom.sf.net/ | 2009年12月現在、トランクから直接取得した場合はjQueryバインディングをサポートします。

$("#foo").injectWith(collectionOfJavaScriptObjects);

または

$("#foo").injectWith(simpleJavaScriptObject);

また、class = "data：propName other classnames"属性にすべての "data：propName"マーカーを配置できるようになったため、アプリケーションのコンテンツをこれらのマーカーで散らかす必要がなくなりました。

私は最近の機能拡張を反映するために、まだ多くのドキュメントを更新していませんが、2007年以降、このフレームワークのさまざまなバージョンを本番環境で使用しています。

この質問に懐疑的な人に：

MicrosoftがIE5でXmlHttpRequestおよび「ajax」パターンとして知られるものを発明したとき、この背後にある約束の一部は、Webブラウザーとサーバー間でデータを純粋に交換することでした。そのデータはXMLにカプセル化されていました。なぜなら、1999/2000ではXMLが非常にホットだったからです。コールバックメカニズムを使用してネットワーク経由でxmlドキュメントを取得する以外に、MSのMSXML ActiveXコンポーネントは、現在XSL-TおよびXPathとして知られている事前ドラフト実装もサポートしていました。

HTTP/XML、XPath、およびXSL-Tの取得を組み合わせることにより、開発者は、「アプリケーション」として動作し、純粋に送信し、さらに重要なことにはサーバーからデータを取得する豊富な「ドキュメント」を作成できます。

なぜこれが便利なパターンなのですか？それは、ユーザーインターフェイスの複雑さと、その保守性をどの程度重視するかによって異なります。

高度なCSSを使用して視覚的に非常にリッチなセマンティックマークアップインターフェイスを構築する場合、最後に行うことは、マークアップの断片を「ミニコントローラー/ビュー」にチャンクアウトすることです。ドキュメント、そしてその理由はここにあります。

高度なhtml/cssユーザーインターフェイスを管理しやすくするための重要な原則の1つは、少なくとも開発のアクティブフェーズで検証を維持することです。マークアップが検証されると、CSSのバグに集中できます。マークアップの断片がユーザーインタラクションのさまざまな段階で挿入されると、管理が非常に面倒になり、全体が脆弱になります。

アイデアは、すべてのマークアップUIコンストラクトを単一のドキュメントに入れ、ネットワーク経由でONLY DATAを取得し、非常に単純に、マークアップ構造にデータを注入し、せいぜい反復可能としてフラグを立てたマークアップ構造を複製します。

これは、IE5 +のXSL-TとXPathで可能でしたが、他のブラウザーでは事実上不可能でした。一部のF/OSSブラウザーフレームワークはXPathを使用していましたが、まだ信頼できるものではありません。

そのようなパターンを達成するための次善策は何ですか？ IBDOM。サーバーからデータを取得し、ドキュメントに挿入します。楽々。

3
Chris Holland

Javascript-Templatesをご覧ください。これは有名なjQuery File Uploadプラグイン内で使用され、同じ作者であるSebastian Tschan（@blueimp）によって開発された小さなテンプレートエンジンです。

https://github.com/blueimp/JavaScript-Templates

セバスチャンによって作成された使用ガイドに従ってください、ちょうどこの行を削除してください

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

これに置き換えます

$('#result').html(tmpl('tmpl-demo', data));

忘れないでくださいdiv結果タグもHTMLファイルに追加してください

<div id="result"></div>

楽しい

2
vinzcelavi