Plantilla de bigote JS con colección JSON
Hola, este es mi primer intento de usar MustacheJS con un servicio web JSON en .net
Actualmente estoy teniendo problemas. Parece que no puedo encontrar lo que estoy haciendo mal, dando este ejemplo básico:
Mi servicio web está retomando la siguiente cadena:
[
{
"ShortDescription":"BOX",
"Description":"BOXING",
"Id":1
},
{
"ShortDescription":"EPL",
"Description":"ENGLISH PREMIER LEAGUE",
"Id":2
}
]
He validado su sintaxis con este sitio web:http://json.parser.online.fr/
y aquí está el código HTML que estoy usando:
google.load("jquery", "1");
google.setOnLoadCallback(function () {
$(document).ready(
function () {
$.ajax({
url: "../data.asmx/geteagues",
type: "POST",
dataType: "json",
data: "",
contentType: "application/json; charset=utf-8",
success: function (data) {
var template = "<h1>{{ShortDescription}} {{Description}}</h1>";
var html = Mustache.render(template, data);
$('#sampleArea').html(html);
alert(html);
}
})
}
)
});
Estoy publicando todo el código JS, ya que no soy muy bueno con javascript, básicamente quiero cargar siempre la última versión de JQuery de google y luego trabajar mi llamada WS.
El problema hasta ahora es que cuando coloco un punto de interrupción en la siguiente línea:
var html = Mustache.render(template, data);
Veo que la plantilla está bien establecida, y también lo hacen los datos, el mismo valor que publiqué anteriormente, pero la función .render está regresando:
Parece que no me gustaron los datos.Hasta ahora, todos los ejemplos que he visto para datos en línea tienen la siguiente estructura:
{
"repo": [
{ "name": "resque" },
{ "name": "hub" },
{ "name": "rip" },
]
}
Y luego una plantilla definida así:
{{#repo}}
<b>{{name}}</b>
{{/repo}}
Pero la única diferencia de eso con mis datos es que no tengo un "padre" como "repo"
En el lado del servidor, estoy usando una biblioteca .net llamada JSON.net y en la documentación de cómo se serializan las colecciones:
james.newtonking.com/projects/json/help/html/SerializingCollections.htm
el resultado final no incluye el nombre del nodo principal, que falta en la definición de mi plantilla de bigote:
[
{
"Name": "Product 1",
"ExpiryDate": "2000-12-29T00:00Z",
"Price": 99.95,
"Sizes": null
},
{
"Name": "Product 2",
"ExpiryDate": "2009-07-31T00:00Z",
"Price": 12.50,
"Sizes": null
}
]
¿Es esto lo que me falta? ¿El nodo primario "repo" de mis datos para que pueda iterar mi plantilla?
Gracias de antemano por tu tiempo.
-ed