Me gustaría usar mustache.js con jQuery en mi aplicación HTML5, pero no puedo hacer que todos los componentes funcionen juntos. Todos los archivos se encuentran, no hay problema aquí (la plantilla está cargada roght, puedo ver su valor en el debugguer Firebug).Mustache.js + jQuery: ¿cuál es el ejemplo mínimo de trabajo?
Aquí es mi 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>
Aquí está mi archivo 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);
});
});
El archivo jquery.mustache.js es la generada a partir 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);
Observación aparece. Firebug me dice
bigote no está definido
Ver captura: 
sé que falta algo, pero no puedo decir qué.
Gracias.
EDITAR: La respuesta correcta y completa a un mínimo ejemplo es la siguiente:
- escribir la plantilla en el guión, no se cargan desde un archivo
- idem para los datos json
- lea cómo se genera el jQuery y use la función
$.mustache.to_htmlen lugar del (documentado en githu b)Mustache.to_html(gracias a @mikez302) - refactor 'hasta el cansancio
$(document).ready(function() {
var template = " ... {{title}} ... ";
var json = {title: "titre article" }
var article = $.mustache(template, json);
$("#content").append(article);
});
embargo, es fácil de leer el JSON desde otro archivo:
$(document).ready(function() {
var template = " ... {{title}} ... ";
$.getJSON('../js/article.json', function(view) {
var article = $.mustache(template, view);
$("#content").append(article);
});
});
que finalmente puede también leer la plantilla de un archivo:
$(document).ready(function() {
$.getJSON('../js/article.json', function(view) {
$.get("../templates/article.mustache", function(template) {
var article = $.mustache(template, view);
$("#content").append(article);
});
});
});
Ejemplo de trabajo (sin l problemas de orden oading):
$(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);
});
}
yo pondría todo el JavaScript ** ** después el contenido. [LINK] (http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/) – Sparky
gracias por la sugerencia. No estoy buscando la optimización en este momento, quiero que mi código funcione. –
Lo publiqué como comentario y no como respuesta. Por supuesto, el ** pedido ** en el que carga su secuencia de comandos incluye _also_ es importante para que el código funcione. Si eres un principiante en JavaScript, esta información es una "lectura obligatoria" crítica. ¿Todos los principiantes saben que deben cargar jQuery antes de que carguen jQueryUI o cualquier otro plugin jQuery? – Sparky