web-dev-qa-db-ja.com

jQueryテンプレートエンジン

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

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

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

jquerytemplatesjsrender
201
Maurice

Rick Strahlの投稿 jQueryを使用したクライアントテンプレート をご覧ください。彼はjTemplatesを探求しますが、John Resigの マイクロテンプレートソリューション のより良いケースを作り、さらにそれを改善します。良い比較、たくさんのサンプル。

109
ewbi

これについていくつか調査したところ、 jquery-tmpl を使用します。どうして？

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

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

46
Todd Menier

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

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

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

先端をありがとう、ewbi。

23
KevBurnsJr

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>

テストページ...

17
Tomasz Mazur

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/

13
jonsequitur

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

11
Chris Vest

それはあなたがどのように「最良」を定義するかによります。私の投稿をご覧ください here トピック

fastestを探すと、ここにニースがあります ベンチマーク 、それは DoT が勝っているようです、他の全員を置き去りにする

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

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

ベータ版 temporarily-official JQueryテンプレートプラグインはこれでした http://api.jquery.com/category/plugins/templates/

しかし、明らかに、それほど前ではないが、ベータ版でそれを維持することに決めました...

注：jQueryチームは、このプラグインをベータ版として使用しないことを決定しました。現在、積極的に開発または保守されていません。ドキュメントは、適切な置換テンプレートプラグインの準備が整うまで（参照用）当面ここに残ります。

パートII：次のステップ

新しいロードマップ は新しいプラグインのセットを目指しているようですJSRender（DOMおよびJQueryテンプレートレンダリングエンジンに依存しない）およびJSViewsいくつかのNiceデータバインディングとオブザーバー/オブザーバブルパターンの実装

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

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

そして、これが最新のソースです

その他の資料

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

7
Eran Medan

http://garann.github.com/template-chooser/ このリンクは、Javascriptベーステンプレートを選択するのに非常に役立ちます。

5
Ajay Patel

愚か者だけになる^^

// 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/ ;）

4
molokoloco

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

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

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

3
levik

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

そこには重要な修正と興味深い機能があります。 http://github.com/jquery/jquery-tmpl/network

2
Yann

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

1
mckamey

Jtemplates jqueryプラグを使用していましたが、パフォーマンスは本当に悪かったです。トリムパス（ http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ）に切り替えました。これにより、パフォーマンスが大幅に向上しました。 IE7またはFFに問題はありません。

1
EShy

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

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

ああ、簡単な構文。

1
Donovan Walker

John Resigのブログには、彼が投稿したものがあります。 http://ejohn.org/blog/javascript-micro-templating/

1
morgancodes

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

リストされた多くのテンプレートソリューション（jQote、jquery-tmpl、jTemplates）の1つの問題は、HTMLにHTML以外を挿入する必要があることです。 。長所と短所はありますが、私は個人的にそのアプローチの感触が好きではありません。

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

Knockout はこのアプローチの良い例ですが、私はそれを自分で使ったことがないので、他の人が好きかどうかを決めるために投票に任せています。少なくとも、それでもっと遊ぶ時間があるまでは。

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

参考のために chain.js を参照することもできますが、元のリリースからあまり更新されていないようです。詳細については http://javascriptly.com/2008/08/a-better-javascript-template-engine/ を参照してください。

0
studgeek

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

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

0
s-sharma

現在、マルチHTMLテンプレートフレームワークを使用しています。このフレームワークにより、テンプレート化されたデータをDOMにインポートすることが非常に簡単になります。また、優れたMVCモデリング。

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

0
Bny