205

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

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

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

4

18 に答える 18

109

Rick Strahl の投稿Client Templating with jQuery を確認してください。彼は jTemplates を調査していますが、John Resig のマイクロテンプレート ソリューションのほうが適切であり、さらに改善されています。良い比較、たくさんのサンプル。

于 2008-10-15T03:01:45.010 に答える
47

これについて調査したところ、jquery-tmplを使用します。なんで？

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

詳細はこちら: http://forum.jquery.com/topic/templating-syntax

于 2010-07-16T15:47:20.183 に答える
23

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

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

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

先端をありがとう、ewbi。

于 2009-08-17T10:27:09.917 に答える
17

jQueryナノ：

テンプレートエンジン

基本的な使い方

次の 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>

テストページ...

于 2009-08-07T07:13:10.197 に答える
13

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 Grid の依存関係になるため、jQuery UI チームによって調整されます。

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

于 2010-10-07T15:41:14.177 に答える
11

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

于 2008-10-04T13:33:24.940 に答える
4

バカになるだけです^^

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

于 2011-11-08T22:04:32.627 に答える
3

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

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

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

于 2008-10-04T13:40:11.073 に答える
2

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

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

于 2010-07-29T04:43:37.643 に答える
1

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

于 2009-05-19T03:53:05.010 に答える
1

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

于 2009-05-18T14:35:38.573 に答える
1

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

より完全な機能を備えたテンプレート プラグインを探している場合は、Orange-Jをお勧めします。Freemarker に触発されました。if、else、オブジェクトと配列のループ、インライン JavaScript、テンプレート内のテンプレートをサポートし、出力用の優れた書式設定オプション (maxlen、wordboundary、htmlentities など) を備えています。

ああ、簡単な構文。

于 2011-03-29T21:54:04.667 に答える
1

jtemplates jquery pluging を使用していましたが、パフォーマンスが非常に悪かったです。パフォーマンスが大幅に向上したトリムパス ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates )に切り替えました。IE7 や FF では問題に気づいていません。

于 2010-04-28T21:21:20.897 に答える
0

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

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

于 2013-01-21T11:16:20.473 に答える
0

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

リストされている多くのテンプレート ソリューション (jQote、jquery-tmpl、jTemplates) の 1 つの問題は、HTML に非 HTML を挿入する必要があることです。これは、HTML ツールで作業したり、HTML デザイナーを使用した開発プロセスで苦労したりする可能性があります。 . 長所と短所はありますが、私は個人的にそのアプローチの感触が好きではありません。

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

Knockoutはこのアプローチの良い例ですが、私自身は使用したことがないので、他の人が気に入るかどうかは投票に任せています。少なくとも、もっと遊ぶ時間ができるまで。

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

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

于 2011-03-23T20:21:03.897 に答える
0

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

http://www.enfusion-framework.org/ (サンプルを見てください!)

于 2014-05-30T12:37:56.200 に答える
-1

beeboleによるPUREの書き直しもあります-jqueryの純粋なhtmlテンプレート-https ://github.com/mpapis/jquery-pure-templates

これにより、主にjqueryセレクターを使用して、より多くの自動レンダリングが可能になります。さらに重要なのは、HTMLに派手なものを入れる必要がないことです。

于 2010-11-04T21:41:44.687 に答える