jQueryテンプレートエンジン[終了]

クライアント側を使用するテンプレートエンジンを探しています。私はjsRepeaterやjQueryテンプレートのようなものをいくつか試してきました。FireFoxでは問題なく動作しているように見えますが、IE7では、HTMLテーブルのレンダリングに関してはすべてが機能しないようです。

MicrosoftAjaxTemplates.js（http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766から）も確認しましたが、同じ問題があることがわかりました。

使用する他のテンプレートエンジンに関するアドバイスはありますか？

Rick StrahlによるjQueryによるクライアントテンプレート作成の投稿を確認してください。彼はjTemplatesを探索しますが、John Resigのマイクロテンプレートソリューションをより良いものにして、さらに改善します。良い比較、たくさんのサンプル。

これについていくつかの研究を行ったばかりで、私はjquery-tmplを使用します。どうして？

1. それはジョン・レジグによって書かれました。
2. コアjQueryチームによって「公式」プラグインとして維持されます。 編集：jQueryチームはこのプラグインを廃止しました。
3. シンプルさと機能性の完璧なバランスが取れています。
4. それは非常にクリーンでよく考えられた構文を持っています。
5. デフォルトではHTMLエンコードされます。
6. それは非常に拡張可能です。

詳細：http : //forum.jquery.com/topic/templating-syntax

jQote：http ://aefxx.com/jquery-plugins/jqote/

誰かがResigのマイクロテンプレートソリューションを取り、それをjQueryプラグインにパッケージ化しました。

Resigが自分のものをリリースするまで（彼が自分のものをリリースする場合）、これを使用します。

先端をありがとう、ewbi。

jQuery Nano：

テンプレートエンジン

基本的な使い方

次のJSON応答があると仮定します。

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

あなたは作ることができます：

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

そしてあなたは準備ができた文字列を取得します：

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

テストページ...

jQuery-tmplは、jQuery 1.5以降のjQueryコアに含まれます。

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

公式ドキュメントはこちら：

http://api.jquery.com/category/plugins/templates/

編集：これはjQuery 1.5から除外されており、今後のjQuery UIグリッドの依存関係となるため、jQuery UIチームによって調整されます。

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

特定の問題をどのように処理するかはわかりませんが、PUREテンプレートエンジンもあります。

それはあなたが「ベスト」をどのように定義するかに依存します。トピックに関する私の投稿をここで参照してください

あなたが最速を探しているなら、ここに素晴らしいベンチマークがあります、それはDoTが勝利し、他のすべての人を置き去りにしているようです

あなたが最も公式の JQueryプラグインを探しているなら、これが私が見つけたものです

パートI：jQueryテンプレート

ベータ版の一時的に公式な JQueryテンプレートプラグインは、http： //api.jquery.com/category/plugins/templates/でした。

しかし、明らかに、それほど前のことではありませんが、ベータ版を維持することが決定されました...

注：jQueryチームは、このプラグインをベータ版から除外することを決定しました。それはもはや積極的に開発または保守されていません。ドキュメントは、適切な代替テンプレートプラグインの準備ができるまで、当面（参照用）残ります。

パートII：次のステップ

新しいロードマップには、プラグインの新しいセットを目指しているように見える、JSRender（DOMとは独立して、さらにはjQueryのテンプレートレンダリングエンジン）とJSViews結合およびオブザーバー/ observableパターンの実装いくつかの素晴らしい情報を持っています

これはトピックに関するブログ投稿です

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

そして、ここに最新の情報源があります

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

その他の資料

• トピックに関する素晴らしいプレゼンテーションhttp://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• 作業デモ：http : //borismoore.github.com/jsviews/demos/index.html

まだベータ版ではなく、ロードマップアイテムにすぎませんが、テンプレートとUIバインディング用の公式のJQuery / JQueryUI拡張機能になるのに適しているようです。

ばかになるだけ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;）

これはjsquery固有ではありませんが、GoogleがオープンソースとしてリリースしたJSベースのテンプレートライブラリを次に示します。

http://code.google.com/p/google-jstemplate/

これにより、DOM要素をテンプレートとして使用できるようになり、再入可能になります（テンプレートレンダリングの出力が、別のデータモデルで再レンダリングできるテンプレートであるという点で）。

他の人はjquery-tmplを指摘し、私はそれらの答えを支持しました。ただし、必ずgithubフォークを確認してください。

重要な修正や興味深い機能もあります。 http://github.com/jquery/jquery-tmpl/network

John Resigは、自分のブログに投稿したものを持っています。http://ejohn.org/blog/javascript-micro-templating/

.NET Framework 2.0 / 3.5で作業している場合は、http：//JsonFx.netで実装されているJBSTを確認する必要があります。これには、使い慣れたJSP / ASP構文を持つクライアント側のテンプレートソリューションがありますが、実行時に解析する必要のない、キャッシュ可能なコンパクトなテンプレート用にビルド時にプリコンパイルされます。テンプレート自体が純粋なJavaScriptにコンパイルされるため、jQueryおよびその他のJavaScriptライブラリとうまく連携します。

私はjtemplates jqueryプラグインを使用していましたが、パフォーマンスは本当に悪かったです。パフォーマンスがはるかに優れているtrimpath（http://code.google.com/p/trimpath/wiki/JavaScriptTemplates）に切り替えました。IE7やFFの問題に気づきませんでした。

非常に軽い作業にはjquery-tmplで十分ですが、場合によっては、データがそれ自体をフォーマットする方法を知っている必要があります（悪いこと！）。

よりフル機能のテンプレートプラグインを探している場合は、Orange-Jをお勧めします。Freemarkerに触発されました。オブジェクト、配列、インラインJavaScript、テンプレート内のテンプレートをループするかどうかをサポートし、出力用の優れたフォーマットオプション（maxlen、wordboundary、htmlentitiesなど）を備えています。

ああ、そして簡単な構文。

テンプレートをどのように設計するかを少し考えてみてください。

リストされている多くのテンプレートソリューション（jQote、jquery-tmpl、jTemplates）の1つの問題は、HTMLに非HTMLを挿入する必要があることです。これは、HTMLツールやHTMLデザイナーの開発プロセスでの作業が面倒な場合があります。 。私は個人的にはそのアプローチの感触が好きではありませんが、長所と短所があります。

通常のHTMLを使用するテンプレートアプローチの別のクラスがありますが、要素の属性、CSSクラス、または外部マッピングを使用してデータバインディングを示すことができます。

ノックアウトはこのアプローチの良い例ですが、私は自分でそれを使用したことがないので、投票に任せて、他の人が気に入っているかどうかを判断します。少なくとも私がそれで遊ぶ時間があるまで。

別の回答としてリストされているPUREは、このアプローチの別の例です。

参考までに、chain.jsも確認できますが、最初のリリース以降、あまり更新されていないようです。詳細については、http：//javascriptly.com/2008/08/a-better-javascript-template-engine/を参照してください。

ウェブサイトでJohn Resigのテンプレートエンジンを使用するDropbox。Dropboxのこのjsファイルで確認できるように少し変更されています。このファイルでtmplを検索すると、テンプレートエンジンのコードが作成されます。

ありがとう。それが誰かのために役立つことを願っています。

私は現在、マルチHTMLテンプレートフレームワークを使用しています。このフレームワークにより、テンプレート化されたデータをDOMに簡単にインポートできます。また、素晴らしいMVCモデリング。

http://www.enfusion-framework.org/ （サンプルをご覧ください！）

beeboleによるPUREの書き換えもあります-jqueryピュアhtmlテンプレート-https ://github.com/mpapis/jquery-pure-templates

主にjqueryセレクターを使用して、より多くの自動レンダリングを可能にする必要があります。これは、HTMLに凝ったものを配置する必要がないというより重要なことです。