web-dev-qa-db-ja.com

Mustache.js + jQuery：最小限の作業例は何ですか？

HTML5アプリでjQueryでmustache.jsを使用したいのですが、すべてのコンポーネントを連携させることができません。すべてのファイルが見つかりました。ここでは問題はありません（テンプレートはロードされています。Firebugdebugguerでその値を確認できます）。

これが私のindex.htmlです：

<!DOCTYPE html>
<html lang="fr">
    <head><meta charset="utf-8"></head>
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="../js/jquery.mustache.js"></script>
        <script src="../js/app.js"></script>
        <div id="content"></div>
    </body>
</html>

これが私のapp.jsファイルです：

$(document).ready(function() {
    var template = $.get('../templates/article.mustache');
    $.getJSON('../js/article.json', function(view) {
        var html = Mustache.to_html(template, view);
        $("#content").append(html);
    });
});

Jquery.mustache.jsファイルは https://github.com/janl/mustache.js から生成されたものです：

/*
Shameless port of a shameless port
@defunkt => @janl => @aq

See http://github.com/defunkt/mustache for more info.
*/

;(function($) {

// <snip> mustache.js code

  $.mustache = function(template, view, partials) {
    return Mustache.to_html(template, view, partials);
  };

})(jQuery);

注意が表示されます。 Firebugは私に教えてくれます

口ひげは定義されていません

キャプチャを参照してください： enter image description here

何かが足りないことは知っていますが、何がわからないのです。

ありがとう。

[〜＃〜]編集[〜＃〜]：最小に対する正解と完全な回答例は次のとおりです。

  • スクリプトにテンプレートを記述し、ファイルからロードしないでください
  • jsonデータのidem
  • jQueryがどのように生成されるかを読み、（githubに記載されている）$.mustache.to_htmlの代わりにMustache.to_html関数を使用します（ありがとう @ mikez302 ）
  • ドロップするまでリファクタリング
 $（document）.ready（function（）{
 var template = "... {{title}} ..."; 
 var json = {title： " titre article "} 
 var article = $ .mustache（template、json）; 
 $（"＃content "）。append（article）; 
}）;

しかし、別のファイルからjsonを読み取るのは簡単です：

 $（document）.ready（function（）{
 var template = "... {{title}} ..."; 
 $ .getJSON（ '.. /js/article.json'、function（view）{
 var article = $ .mustache（template、view）; 
 $（ "＃content"）。append（article）; 
}）; 
}）;

最後に、ファイルからテンプレートを読み取ることもできます。

 $（document）.ready（function（）{
 $ .getJSON（ '../ js/article.json'、function（view）{
 $ .get（ "../templates/article.mustache"、function（template）{
 var article = $ .mustache（template、view）; 
 $（" ＃content "）。append（article） ; 
}）; 
}）; 
}）;

作業例（ロード順序の問題なし）：

 $（document）.ready（function（）{
 $ .getJSON（ '../ js/article.json'、function（model）{return onJSON（model）;}）; 
}）; 
 
 function onJSON（model）{
 $ .get（ "../ templates/article.mustache"、function（view）{
 var article = $ .mustache（view、model）; 
 $（ "＃content"）。append（article）; 
}）; 
}
javascriptjqueryhtmlmustache
26
Jean-Philippe Caruana

Mustache.to_htmlの代わりに、$.mustacheを試してください。 Mustache変数は関数内で定義されているように見えるので、関数の外部から直接アクセスすることはできません。

11
Elias Zamaria

私はこの質問がすでに回答されていることを知っていますが、私はこのトピックについて正確にブログ投稿を書き、jQueryでMustacheを使用する方法の例を探している人なら誰でも見ることができるように、ここで共有すると思いました。

http://blog.xoundboy.com/?p=535

6
Xoundboy