JQueryの推奨JavaScript HTMLテンプレートライブラリ?[閉まっている]


89

どのHTMLテンプレートライブラリがJQueryに適しているかに関する提案はありますか?グーグルによってかなりの数のライブラリが表示されますが、時の試練に耐えられる十分に認識されたライブラリがあるかどうかはわかりません。


21
100レコードのjsonオブジェクトを持ち帰るとします。各レコードは同じhtmlフラグメントを生成する必要があります。これは、jsでマークアップを生成するよりも、テンプレートを使用するのに役立ちます。マークアップがjs関数の文字列内にあるのではなく、設計者が設計することもできます
redsquare

3
@cletus-追加のチェーンよりもHTML形式のテンプレートを使用する方が簡単だから
Andrey

2
このパフォーマンス比較を使用して、選択を支援します:jsperf.com/dom-vs-innerhtml-based-templating
AM

回答:


58

まあ、正直なところ、クライアント側のテンプレートは今日非常に暑いですが、かなりジャングルです。

最も人気があるのは次のとおりです。

  • pure:jsのみを使用し、独自の「構文」は使用しません
  • 口ひげ:かなり安定していていいと聞いた。
  • jqote2jsperfsによると非常に高速
  • jqueryテンプレート(非推奨):

他にもたくさんありますが、自分に合ったものやプロジェクトスタイルを確認するには、それらをテストする必要があります。

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

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


14

jTemplates

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

jQueryへのプラグイン...

特徴:

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

8

このトピックに関する妥当なディスカッションドキュメントがここにあります。これには、さまざまなテンプレートツールが含まれます。ただし、jQueryに固有ではありません。


5

Microsoftによって作成され、公式のjQueryプラグインとして受け入れられたjQueryテンプレートプラグイン。

ただし、現在は非推奨となっていることに注意してください


13
そして「非推奨」となった。開発は中止されており、これはベータ版から外れることはありません。ms guyとjquery-uiチームがJSRenderに基づいて新しいテンプレートに取り組んでいます;)
roselan

ええと、残念-私は自分のWebアプリ全体でそれを使用しています:(ヒントをありがとうございます!先ほどお伝えしたテンプレートエンジンのリンクはありますか?
Andrey

1
すべてがうまくいけば、ボリス・ムーアのjsrenderが jquery-uiにそれを見つけます。急ぐ必要はないと思います;)
roselan '19年

1
私はプロジェクトにjsRenderを実装しましたが、それは驚くべきことです。チェックアウトする価値があります。
ASeale

4

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


4
免責事項..私はこれを書きました。しかし、チェックアウトする価値があります;)
チャドブラウン

3

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

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

または

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

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

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

この質問に懐疑的である場合:

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

HTTP / XML、XPath、およびXSL-Tの取得を組み合わせることにより、開発者は、「アプリケーション」として動作し、純粋にサーバーからデータを送信し、さらに重要なことにデータを取得する、リッチな「ドキュメント」を構築する途方もない創造性を手に入れました。

なぜこれが便利なパターンなのですか?それは、ユーザーインターフェイスがどれほど複雑で、その保守性をどれだけ重視するかに依存します。

高度なCSSで視覚的に非常に豊富な意味論的にマークアップされたインターフェースを構築する場合、最後に行うべきことは、マークアップの一部を「ミニコントローラー/ビュー」にチャンクアウトすることです。これにより、ドキュメントフラグメントをメインに.innerHTMLできます。ドキュメント、そしてここに理由があります。

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

アイデアは、すべてのマークアップUI構成要素を1つのドキュメントに入れ、ネットワーク経由でのみデータを取得し、少なくとも単純にデータをマークアップ構成要素に挿入し、ほとんどの場合はマークアップ構成を複製するという強固なフレームワークを使用することでした。繰り返し可能としてフラグを立てました。

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

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


もう1つ:IBDOMは100%純粋なDOMメソッドを使用し、innerHTMLを使用しません。
Chris Holland

別のメモ:IBDOMは、内部で使用されるコンポーネントである「forkedLoopExecution」と呼ばれるものを実装し、それ自体で使用できるものです。ここに問題がありました:ビッグデータオブジェクトのかなり大きな配列を通過する必要があるある種のループ構成で、createElementおよびappendChildを介してDOMを変更しているとします。ほとんどのブラウザーは、 DOMに影響するコードは「戻ります」。大量のデータが含まれる大規模な「forループ」では、検索結果は、全体を1つのチャンクで表示するまでに0.5秒から数秒かかることがあります。
Chris Holland

解決策:forkedループの実行は、繰り返し渡されるデータ収集の存続期間全体にわたってsetTimeoutによって引き起こされる再帰的な実行を活用して、基本的に各ループの反復で「戻りと再描画」を行い、このインスタントレンダリングの感覚を与えます。 -いますぐフリギンで」
Chris Holland

2

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

HTMLファイルにもdiv結果タグを追加すること忘れないでください

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

楽しい

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.