どのHTMLテンプレートライブラリがJQueryに適しているかに関する提案はありますか?グーグルによってかなりの数のライブラリが表示されますが、時の試練に耐えられる十分に認識されたライブラリがあるかどうかはわかりません。
どのHTMLテンプレートライブラリがJQueryに適しているかに関する提案はありますか?グーグルによってかなりの数のライブラリが表示されますが、時の試練に耐えられる十分に認識されたライブラリがあるかどうかはわかりません。
回答:
まあ、正直なところ、クライアント側のテンプレートは今日非常に暑いですが、かなりジャングルです。
最も人気があるのは次のとおりです。
他にもたくさんありますが、自分に合ったものやプロジェクトスタイルを確認するには、それらをテストする必要があります。
個人的に、私は新しい構文とロジックのセット(ロジックとテンプレートの混合、こんにちは??)を追加するのに苦労して、純粋なjsを使いました。テンプレートの1つ1つが独自のhtmlファイル(./usersTable.row.html)に保存されています。私はコンテンツをajaxする場合にのみテンプレートを使用し、テーブル用、div用、リスト用の「ロジック」jsファイルはほとんどありません。また、selectのオプション用ではありません(別の方法を使用している場合)。
もっと複雑なことをしようとするたびに、コードが不明確で、「古い」方法よりも安定させるのに時間がかかることがわかりました。テンプレートのロジックは私の意見ではまったくナンセンスであり、独自の構文を追加すると、追跡が非常に難しいバグのみが追加されます。
JavaScriptのテンプレートエンジン。
jQueryへのプラグイン...
特徴:
- JavaScriptで100%
- プリコンパイラー
- JSONをサポート
- Ajaxを使用する
- テンプレート内でJavaScriptコードを使用できるようにする
- カスケードテンプレートの作成を許可する
- テンプレートでパラメータを定義できるようにする
- ライブリフレッシュ!-サーバーからのコンテンツの自動更新...
Microsoftによって作成され、公式のjQueryプラグインとして受け入れられたjQueryテンプレートプラグイン。
ただし、現在は非推奨となっていることに注意してください。
数年前、私は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。サーバーからデータを取得し、ドキュメントに挿入します。楽々。
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>
楽しい