小胡子JS模板使用JSON集合 [英] Mustache JS Template with JSON Collection
问题描述
你好，这是我第一次使用MustacheJS在.NET中的Web服务JSON尝试
目前，我挣扎，我似乎无法找到我在做什么错误的设置这个基本的例子：
我的web服务returing以下字符串：
[
{
SHORTDESCRIPTION：BOX，
说明：拳，
ID：1
}，
{
SHORTDESCRIPTION：EPL
说明：ENGLISH preMIER LEAGUE
ID：2
}
]
我已经验证了它的语法与本网站： http://json.parser.online.fr/
和这里是HTML code我使用的：
的google.load（jQuery的，1）;
google.setOnLoadCallback（函数（）{
$（文件）。就绪（
功能（）{ $阿贾克斯（{
网址：../data.asmx/geteagues
键入：POST，
数据类型：JSON
数据：，
的contentType：应用/ JSON的;字符集= UTF-8，
成功：功能（数据）{
VAR模板=＆LT; H1＆GT; {{SHORTDESCRIPTION}} {{说明}}＆LT; / H1＆gt;中;
变种的html = Mustache.render（模板，数据）;
$（'＃sampleArea'）HTML（HTML）;
警报（HTML）;
}
}） }
）
}）;
我张贴整个JS code，因为我不是很好用JavaScript，基本上我要永远从装载谷歌最新的JQuery的版本，然后工作，我的WS电话。
问题到目前为止是，当我把一个断点以下行：
VAR HTML = Mustache.render（模板数据）;
我看到模板SETN ok了，所以没有数据，相同的值，我张贴以上，但.render函数返回：
我看来它不喜欢的数据
到目前为止，我已经看到了前来为以下结构内嵌数据的所有例子：
{
回购：[
{名：resque}，
{名：枢纽}，
{名：哧}，
]
}
和则这样定义的模板：
{{＃回购}}
＆LT; B＆GT; {{名}}＆LT; / B＆GT;
{{/回购}}
但是，对我的数据的唯一区别是，我没有一个父喜欢回购
在服务器端，我使用所谓JSON.net一个.NET库，以及如何被序列化集合的文档中：
james.newtonking.com/projects/json/help/html/SerializingCollections.htm
最后的结果不包括父节点的名字，这是我的事情是从我的胡子模板定义丢失：
[
{
名称：产品1，
ExpiryDate：2000-12-29T00：00Z
价格为99.95，
大小：空
}，
{
名称：产品2
ExpiryDate：2009-07-31T00：00Z
价格：12.50，
大小：空
}
]
这是我缺少的是什么？从我的数据回购的父节点，所以我可以重复我的模板？
在此先感谢您的时间。
-ed
{{＃。 }}
＆LT; B＆GT; {{名称}}＆LT; / B＆GT;
{{/。 }}
请注意，而不是/\".
Hi this is my first attempt to use MustacheJS with a JSON webservice in .net
Currently I am struggling I can't seem to find what I am doing wrong setting this basic example:
My Webservice is returing the following string:
[
{
"ShortDescription":"BOX",
"Description":"BOXING",
"Id":1
},
{
"ShortDescription":"EPL",
"Description":"ENGLISH PREMIER LEAGUE",
"Id":2
}
]
I have validated its syntax with this website: http://json.parser.online.fr/
and here is the HTML code I am using:
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);
}
})
}
)
});
I am posting the whole JS code, since I am not very good with javascript, basically I want to load always the latest JQuery version from google and then work my WS call.
The problem so far is that when I place a breakpoint in the following line:
var html = Mustache.render(template, data);
I see that the template is setn ok, and so does the data, same value as I posted above, but the .render function is returning:
I seems It didnt like the data.So far all the examples I have seen for inline data come as the following structure:
{
"repo": [
{ "name": "resque" },
{ "name": "hub" },
{ "name": "rip" },
]
}
And then a template defined like this:
{{#repo}}
<b>{{name}}</b>
{{/repo}}
But the only difference of that against my data is that I dont have a "parent" like "repo"
At server side, I am using a .net library called JSON.net and in the documentation of how are collections being serialized:
james.newtonking.com/projects/json/help/html/SerializingCollections.htm
the final result does not include the parent node's name, which I thing is missing from my Mustache Template definition:
[
{
"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
}
]
Is this what I am missing? the "repo" parent node from my data so I can iterate my Template?
Thanks in advance for your time.
-ed
Per @stealth on this question Mustache.js: Iterate over a list received via json
{{ #. }}
<b>{{Name}}</b>
{{ /. }}
Note the only difference from @stealth's answer is a "#" instead of "/".
这篇关于小胡子JS模板使用JSON集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
