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

https://stackoverflow.com/questions/170168

05-07-2019
|

質問

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

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

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

解決

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

他のヒント

これについていくつか調査を行ったので、 jquery-tmpl を使用します。なぜですか？

John Resigによって作成されました。
コアjQueryチームによって「公式」として保守されます。プラグイン。 編集：jQueryチームはこのプラグインを廃止しました。
シンプルさと機能性の間で完璧なバランスが取れています。
非常にクリーンでよく考えられた構文を持っています。
デフォルトではHTMLエンコードされます。
拡張性が高い。

詳細： 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("Hello {user.first_name} {user.last_name}! Your account is {user.account.status}", data)
そして準備ができた文字列を取得します：
Hello Thomas Mazur! Your account is active
テストページ...

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テンプレート

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

しかし、明らかに、それほど前のことではありませんが、ベータ版のままにしておくことにしました...

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

パートII：次のステップ

新しいロードマップが目指しているようです新しいプラグインのセット、 JSRender （DOMおよびJQueryテンプレートレンダリングエンジンとは無関係）および JSViews には、優れたデータバインディングとオブザーバー/観測可能なパターン実装

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

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拡張機能になるのに適した候補のようです

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

バカになるだけ^^

// 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 forkを必ず確認してください。

そこには重要な修正と興味深い機能があります。 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 。使い慣れた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を使用するテンプレートアプローチの別のクラスがありますが、要素属性、CSSクラス、または外部マッピングを使用してデータバインディングを示すことができます。

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

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

参照用に chain.js もご覧いただけますが、元のリリース以降、あまり更新されていないようです。詳細については、 http://javascriptly.com/2008/をご覧ください。 08 / a-better-javascript-template-engine / 。

Dropbox / "rel =" nofollow ">ウェブサイトのJohn Resigのテンプレートエンジン。この jsファイル。このファイルでtmplを検索すると、テンプレートエンジンのコードが作成されます。

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

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

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

beeboleによるPUREの書き換えもあります-jquery pure html templates- https：// github .com / mpapis / jquery-pure-templates

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow