レンダリング プロセス中にテンプレートを DOM に挿入するjquery.tmpl
ためのドキュメント:.appendTo
$.tmpl( myTemplate, myData ).appendTo( "#target" );
既存のアプリを別のテンプレート エンジンから変換しようとしていますが、DOM に追加する前に、まずコードでテンプレートを文字列にレンダリングする必要があります。これは可能ですか?それはどのように行われますか?
レンダリング プロセス中にテンプレートを DOM に挿入するjquery.tmpl
ためのドキュメント:.appendTo
$.tmpl( myTemplate, myData ).appendTo( "#target" );
既存のアプリを別のテンプレート エンジンから変換しようとしていますが、DOM に追加する前に、まずコードでテンプレートを文字列にレンダリングする必要があります。これは可能ですか?それはどのように行われますか?
ここでの回答は役に立ちませんでしたが、Adam の返信で正しい軌道に乗ることができました。jQuery でラップされた要素にはすべて.html()
メソッドがあります。
var output = $( "#infoWindowTemplate" ).tmpl( city_data ).html()
またはテキストが必要な場合...
var output = $( "#infoWindowTemplate" ).tmpl( city_data ).text()
ただし、テンプレートの最も外側の (ルート) 要素はスキップされることに注意してください。そのため、テンプレートを次のようにする必要があります。
<script id='infoWindowTemplate' type='text/x-jquery-tmpl'>
<div class='city_info'>
<h1 class='title'><a href="${link}">${name}</a></h1>
<p class='meta'>${count} offers</p>
</div>
</script>
または、jQuery outerHtml プラグイン ( http://darlesson.com/jquery/outerhtml/ ) を使用.html()
して、.outerHTML()
次のように、結果を一時コンテナに入れて、そのinnerHTMLを取得するだけで実行できます。
var str = $("<div />").append($.tmpl(myTemplate, myData)).html();
jQuery.tmpl
jQuery オブジェクトにラップされた HTMLElement を返します。これは、レンダリングされた文字列が古いテンプレート システムにあったのと同じ方法で使用できます。
var $template = $('#template'),
html = $.tmpl($template, data).get();
これは実際には通常の文字列よりも高速であると思われますが、これに関するプロファイリング データはまだありません。
アップデート
Mustache.js と jQuery.tmpl の間でいくつかの基本的なプロファイリングを行いましたが、統計はよく見えません。
1,000 のプリロードされたレコードから始めて、それらのテンプレートを数回生成し、結果を平均しました。
Mustache.js: 1783ms
jQuery.tmpl: 2243ms
切り替える前に、jQuery.tmpl がそのギャップを埋めるまで待つかもしれません。
jQuery テンプレートが提供します$.template()
(ソース コードの説明を参照) - データでキャッシュされたテンプレートを評価した後、文字列の配列を返します。私はゼロから (そして Chrome のコンソールでの実験から) 書いていますが、全体のアイデアは理解できるでしょう。
名前付きテンプレート関数を作成してキャッシュする
$("template-selector").template("template-name");
テンプレート関数を取得し、データで呼び出します
var tmpl = $.template("template-name"); // template function
var strings = tmpl($, {data: {<your data here>}}); // array of strings
var output = strings.join(''); // single string
これは正しく動作します
var s = $.tmpl(url, dataContext).get()[0].data;
私は間違っていました。上記の例は、返されたものがhtml以外の場合にのみ機能します。私が使用するhtmlの場合
var s = $.tmpl(url, dataContext).get()[0].outerHTML
編集: 掘り下げた後、Chrome と FF の違いを発見しました (上記の例は Chrome で動作します)。
最後に、クロスブラウザの作業方法を見つけました。タグを作成したいとしましょう。したがって、テンプレートは次のようになります
<a href='${url}'>${text}</a>
resul を文字列として取得する最も簡単な方法は、テンプレートを任意のタグ内にラップしてから .html() 関数を使用することです
var t = '<div><a href='${url}'>${text}</a></div>'
var d = {url: 'stackoverflow.com', text: 'best site'};
var html = $.tmpl(s, d).get()[0];
html = $(html).html(); // trick is here
このようなテンプレートデータを用意できます
var tmplData = {link:"your link",name:"yourname",count:5};
$("#idofelementwhereuwanttoappend").append($("#infoWindowTemplate").tmpl(tmpldata));
これidofelementwhereuwanttoappend
は、テンプレート データがレンダリングされる ID です。