Moustache.js + jQuery: Quel est l'exemple de travail minimal?

je voudrais utiliser une moustache.js avec jQuery dans mon application HTML5, mais je ne peux pas faire fonctionner tous les composants ensemble. Chaque fichier est trouvé, il n'y a pas de problème ici (le modèle est chargé roight, je peux voir sa valeur dans le débogueur Firebug).

Voici mon 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>

Voici mon application.fichier 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);
    });
});

le jquery.moustache.fichier js est celui généré à partir de 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);

Note s'affiche. Firebug me dit

la Moustache n'est pas défini

voir capture : enter image description here

je sais que quelque chose manque, mais je ne peux pas dire quoi.

Merci.


EDIT: La réponse correcte et complète à un minimum l'exemple est le suivant :

  • écrire le modèle dans le script, ne pas charger à partir d'un fichier
  • idem pour les données json
  • lire comment le jQuery est généré et utiliser $.mustache.to_html fonction à la place de l' (documenté sur github) Mustache.to_html (merci à @mikez302)
  • refactoriser 'till you drop
$(document).ready(function() {
  var template = " ... {{title}} ... ";
  var json = {title: "titre article" }
  var article = $.mustache(template, json);
  $("#content").append(article);
});

mais, il est facile de lire le json d'un autre fichier:

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

vous pouvez enfin lire le modèle d'un fichier :

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

exemple de Travail (sans chargement les problèmes d'ordre) :

$(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);
  });
}
25
demandé sur Community 2011-06-22 16:36:22
la source

2 ответов

à la place de Mustache.to_html, essayez $.mustache. Il me semble que l' Mustache la variable est définie dans la fonction, de sorte qu'elle n'est pas directement accessible en dehors de celle-ci.

11
répondu Elias Zamaria 2011-06-22 21:31:26
la source

je sais que cette question a déjà été répondue, mais j'ai écrit un billet de blog précisément sur ce sujet et j'ai pensé que je le partagerais ici pour que n'importe qui cherchant des exemples de la façon d'utiliser moustache avec jQuery pourrait le voir.

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

6
répondu Xoundboy 2011-10-31 01:24:27
la source

Autres questions sur