3

mustache.jsを使って、

mustaches.js テンプレートを読み込むために、ブラウザの標準ページ ローダーに依存したいと考えています。

つまり、JQuery リクエスト ($.get) を削除してテンプレートをメモリに取り込み、テンプレートを別の html ファイルに残したいということです。今のところこの作品：

ファイル contact.html:

<script id="tpl-test" type="text/html">
   <h1> {{firstname}} </h1>
</script>

ファイル my.js

$.get("tpl/contact.html", function(templates){
   var template = $(templates).filter('#tpl-test').html();
   var jdata={firstname: 'fname'};
   $('body').append(Mustache.render(template, jdata));
});

そして、私はこれに似たものが欲しいです:

contact.html ファイル (そのまま)

jquery $.get リクエストの代わりに、次のことをお勧めします。

index.html で:

<script id="tpl-test" src="tmpl/contact.html" type="text/html"></script>

更新: Chrome では、テンプレートは次のように読み込まれます。 ここに画像の説明を入力

ファイル my.js (私の願いですが、これは機能しません)

function ondemand(){
   var template = $(templates).filter('#tpl-test').html();
   var jdata={firstname: 'fname'};
   $('body').append(Mustache.render(template, jdata));
});

前もって感謝します。

4

2 に答える 2

4

scriptコメントで述べたように、（使用とsrc属性）のようにテンプレートファイルを参照することはできません。

なぜあなたが気に入らないのか推測できる$.getのは、実際にファイルを要求するまでにテンプレートの使用を待たされるからです。

私はあなたが望むことをするかもしれないあなたのコードへの小さな変更を提案したいと思います：

// Somewhere that runs immediately
// contactTemplate will contain a jqXHR object
var contactTemplate = $.get( "tmpl/contact.html ");


// Somewhere later in your code
function ondemand(){
   contactTemplate.done( function ( template ) {
       var jdata={firstname: 'fname'};
       $('body').append(Mustache.render(template, jdata));
   });
});

これにより、ondemand呼び出されるまでにテンプレートが読み込まれる可能性が高くなりますが、読み込まれない場合、doneコールバックはテンプレートが返されるのを待ちます。これにより、競合状態の心配がなくなり、テンプレートがすばやく読み込まれます。

ロードされると、以降の呼び出しはすぐondemandにコールバックを呼び出します。done

これは、jQueryDeferredsをサポートするからの新しいjqXHR戻り値を使用します$.get。

アップデート

私のプロジェクトでこれをどのように処理するかについてコメントするだけです。テンプレートを処理するためにRequireJSとtextプラグインを使用しています。オプティマイザーも使用r.jsしているので、すべてのテンプレートとJSコードを本番サイトの単一のリソースにバンドルできます。これにより、使用される依存関係（JavaScript）を指定できますが、テンプレートを使用するときにテンプレートが読み込まれるかどうかを気にする必要はありません。

あなたにこれがどのように見えるかを知るために、contact.js私が私のondemand電話を持っているとしましょう：

define( [
  "jquery",
  "mustache",
  "text!tmpl/contact.tmpl"
], function ( $, Mustache, contactTemplate ) {
  function ondemand(){
    var jdata={firstname: 'fname'};
    $('body').append(Mustache.render(contactTemplate, jdata));
  });

  return {
     show: ondemand
  };
});
于 2012-11-28T16:10:47.983 に答える
0

この $.get はすべて、このソリューションによって回避できます

このソリューションは、次のニーズを満たします。

  1. すべてのテンプレートを含む外部ファイル (.html ではなく .js) を用意します。
  2. 対応する .js ファイルの<script>ハンドルを取得します。$.get
  3. 行末エスケープを削除するために coffeescript と一緒に使用すると簡略化されます。
  4. おそらく.js文字列をロードする方が速く、最終的に.js文字列になるまで各ファイルをロードして処理する必要があります。
于 2012-12-05T00:26:38.240 に答える