javascript - javascriptとテンプレートを使用してDOMを構築する方法は？

Question

ほとんどのHTMLがjavascriptを使用して構築されているアプリケーションを構築しています。DOM構造は、サーバーから送信されるいくつかのJSONデータ構造を使用して構築され、クライアント側のコードはそのデータのUIを構築します。

私の現在のアプローチは、JSONデータ構造をウォークし、script.aculo.usのBuilder.nodeメソッドを呼び出してDOM構造を構築し、それをサーバーから送信されたHTMLに実際に含まれる要素に追加することです。その過程で、イベントリスナーを必要とするさまざまな要素に登録しています。これにより、かなりの柔軟性が可能になり、非常に動的なインターフェイスが可能になります。

ただし、ビューロジック（つまり、DOM構造）は、データをウォークするコード、イベントハンドラー、およびメモリに保持されるデータと緊密に結合されているため、あまり持続可能ではないと感じています。状態であり、それらの変更をサーバーに戻すことができます。

アプリを駆動するコードからDOM構造を切り離すことができるテンプレートのようなソリューションはありますか？現在、私の唯一のライブラリ依存関係は、prototype.jsとscript.aculo.usであるため、大きなライブラリを導入することは避けたいと思いますが、提案を歓迎します。

ありがとう！

編集：何らかの理由で、Javascriptでサポートされている優れたテンプレート言語は何ですか？この質問を入力しているときに、小さな検索結果に表示されませんでした。ただし、ここの「関連」サイドバーには表示されます。

そこでいくつかの提案を読み、解決策が見つかったら、この質問を閉じます。それ以外の場合は、これらのソリューションが機能しない理由を説明して、この質問を明確にします。

score 7 · Accepted Answer

世の中にはいくつかのテンプレートソリューションがありますが、それらはあなたが既に行っている以上のことを行っているわけではありません。jQuery はこれらの方針に沿っていくつかの作業を行っており、いくつかの jQueryプラグインがソリューションとして登場しています。Prototype.js などにも解決策があります。

いくつかのオプションは次のとおりです。

一般に、Ext jsにはいくつかのテンプレートを含むかなりワイルドで巧妙なものがありますが、さらに別のライブラリを追加することになります。最近は非常に多くのライブラリが放り出されており、多くの場合、軽量でシンプルなカスタムソリューションを実装する方がはるかに簡単です。自分でいくつかの DOM オブジェクトを作成してみてください。JSON データがある場合は、それをメモリに解析し、関数を介して実行します。それは実際に爆発的で、多くの人がやっています。

補足: あなたがやっていることは、非常に持続可能で保守しやすいものかもしれません。HTML のページを送信すると、ブラウザはJavaScript とほぼ同じ方法でDOM 構造をメモリに配置することに注意してください。これらのソリューションは特にお勧めしません。特定のニーズに合わせて素敵な小さなシステムを作成したようですね。一般的に、設計を改良することは、少なくとも他の誰かのパターンに移行するのと同じくらい価値があると思います。独自の依存関係。

補足: 通常、少なくとも多くの市場では、DOM 全体をクライアントで生成することはお勧めできません。あなたの場合のように、それが A-OK の解決策である場合もありますが、このスタイルの開発が常に最適な方法であるとは限らないことを、聴衆全体に注意する価値があります。

score 2 · Accepted Answer

テンプレートはウィジェットにカプセル化できます。プロトタイプにはアドオンを作成する手段がありますが、私は jQuery でこれを行う方法に最も精通しています。最初にプロトタイプを試してみましたが、後で jQuery にはすべてのプロトタイプがあり、それ以上のものがあることに気付きました。また、ユーザーコミュニティによって作成されたアドオン / ウィジェット / プラグインも増えています。

Builder はプロトタイプへの単なるアドオンです。ただし、jQuery での html DOM 要素の構築はコア機能の一部です。

http://docs.jquery.com/Core/jQuery#html と組み合わせる: http://docs.jquery.com/Manipulation/append#content

これは、いくつかの html を構築し、それを jQuery 要素の選択に追加するサンプルです。

$(document.body).append($('<div id="sub-menu-holder" style="position:absolute;top:0;left:0;border:0px none;"></div>'));

また、ajax 呼び出しからデータ構造を取得し、それを使用してエンティティを作成することもできます。または、ajax 呼び出しから html を返して、DOM の適切な場所に直接追加することもできます。

http://docs.jquery.com/Ajax/load#urldatacallback

jquery ロード関数のドキュメントのサンプルを次に示します。

$(document).ready(function(){ $("#links").load("/Main_Page #jq-p-Getting-Started li"); });

それでおしまい。あなたの ajax 呼び出しが挿入されるすべての html を返し、それがどこにあるのか要素 ID を知っていれば、それで十分です。あとは、サーバー側で html を作成する方法を決定するだけです。何を構築しているのかについての具体的な詳細を知らなければ、答えるのは困難です。しかし、サーバー側のテンプレートエンジンは、生成された html が配置される場所について多くを知る必要はありません。

score 2 · Accepted Answer

jQuery 用の「テンプレート」プラグインがいくつかあります。

クライアントですべての変換を行う XSLT エクストラがいくつかありますが、XSL は十分に「デザイナーに優しい」とは思いません

score 0 · Accepted Answer

0

ExtJS には優れたテンプレート構文があります: リンクテキスト

于 2008-10-14T18:53:00.533 に答える

score 0 · Accepted Answer

私が質問を理解している場合、GUI を動的に構築できるようにしたいのですが、定義済みの HTML テンプレートに基づいていますか? 私は、同じことを行うための完全に優れた言語 (HTML) があるのに、JS を使用して DOM を構築することにしばしば奇妙に感じたことを知っています。

XHTML のボイラープレートブロックに XMLHttpRequests を使用し、コード内で必要に応じてこれらのブロックを変更できます。そのようにすると、ロジックとプレゼンテーションをより満足のいくように分離できることがわかります。

score 0 · Accepted Answer

QueryTemplatesを使用すると、マークアップをロジックから完全に分離できます。それを実現するために、DOM および CSS セレクターを使用します。JavaScript 用のライトバージョン (jQuery プラグインとして) と、ネイティブ JS コードを生成できる標準バージョン (実行にライブラリは必要ありません) があります。標準バージョンでテンプレートを生成するには、PHP が必要です (CLI バージョンで問題ありません)。ライブラリは、PHP への jQuery ポートであるphpQueryに基づいています。

JavaScript版のデモをご覧いただけます。標準バージョンを使用すると、PHP 内で非常にクライアント側のエクスペリエンスを得ることができます。DOM イベント、JSON サポート、さらには JSONP を使用した AJAX があります。

score 0 · Accepted Answer

Script#を使用している場合は、強く型付けされた非常に効率的な HTML テンプレートエンジンであるSharpTemplateを検討することをお勧めします。

javascript - javascriptとテンプレートを使用してDOMを構築する方法は？

8 に答える 8

Related

Reference