13

レンダリング プロセス中にテンプレートを DOM に挿入するjquery.tmplためのドキュメント:.appendTo

$.tmpl( myTemplate, myData ).appendTo( "#target" );

既存のアプリを別のテンプレート エンジンから変換しようとしていますが、DOM に追加する前に、まずコードでテンプレートを文字列にレンダリングする必要があります。これは可能ですか?それはどのように行われますか?

4

6 に答える 6

17

ここでの回答は役に立ちませんでしたが、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()

于 2011-07-25T15:06:58.977 に答える
13

次のように、結果を一時コンテナに入れて、そのinnerHTMLを取得するだけで実行できます。

var str = $("<div />").append($.tmpl(myTemplate, myData)).html();
于 2010-10-21T19:53:58.530 に答える
7

jQuery.tmpljQuery オブジェクトにラップされた HTMLElement を返します。これは、レンダリングされた文字列が古いテンプレート システムにあったのと同じ方法で使用できます。

var $template = $('#template'),
    html = $.tmpl($template, data).get();

これは実際には通常の文字列よりも高速であると思われますが、これに関するプロファイリング データはまだありません。


アップデート

Mustache.js と jQuery.tmpl の間でいくつかの基本的なプロファイリングを行いましたが、統計はよく見えません。

1,000 のプリロードされたレコードから始めて、それらのテンプレートを数回生成し、結果を平均しました。

Mustache.js: 1783ms
jQuery.tmpl: 2243ms

切り替える前に、jQuery.tmpl がそのギャップを埋めるまで待つかもしれません。

于 2010-10-21T21:11:54.570 に答える
5

jQuery テンプレートが提供します$.template() (ソース コードの説明を参照) - データでキャッシュされたテンプレートを評価した後、文字列の配列を返します。私はゼロから (そして Chrome のコンソールでの実験から) 書いていますが、全体のアイデアは理解できるでしょう。

  1. 名前付きテンプレート関数を作成してキャッシュする

    $("template-selector").template("template-name");
    
  2. テンプレート関数を取得し、データで呼び出します

    var tmpl = $.template("template-name"); // template function
    var strings = tmpl($, {data: {<your data here>}}); // array of strings
    var output = strings.join(''); // single string
    
于 2013-07-25T10:33:29.523 に答える
0

これは正しく動作します

    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
于 2011-07-20T10:20:00.477 に答える
0

このようなテンプレートデータを用意できます

var tmplData = {link:"your link",name:"yourname",count:5};
$("#idofelementwhereuwanttoappend").append($("#infoWindowTemplate").tmpl(tmpldata));

これidofelementwhereuwanttoappendは、テンプレート データがレンダリングされる ID です。

于 2013-02-25T08:27:33.147 に答える