asp.net - 带有 JSON 集合的 Mustache JS 模板

Question

嗨，这是我第一次尝试在 .net 中使用 MustacheJS 和 JSON 网络服务

目前我正在努力设置这个基本示例，我似乎无法找到我做错了什么:

我的 Webservice 正在返回以下字符串:

[
  {
    "ShortDescription":"BOX",
    "Description":"BOXING",
    "Id":1
  },
  {
    "ShortDescription":"EPL",
    "Description":"ENGLISH PREMIER LEAGUE",
    "Id":2
  }
]

我已经通过这个网站验证了它的语法: http://json.parser.online.fr/

这是我正在使用的 HTML 代码:

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);
                }
            })

        }
    )
});

我发布了整个 JS 代码，因为我不太擅长 javascript，基本上我想总是从谷歌加载最新的 JQuery 版本，然后进行我的 WS 调用。

到目前为止的问题是，当我在以下行中放置断点时:

 var html = Mustache.render(template, data);

我看到模板设置正常，数据也是如此，与我在上面发布的值相同，但是 .render 函数正在返回:我似乎不喜欢数据。

到目前为止，我看到的所有内联数据示例都具有以下结构:

{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" },
  ]
}

然后是这样定义的模板:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}

但是这与我的数据的唯一区别是我没有像“repo”这样的“ parent ”

在服务器端，我使用了一个名为 JSON.net 的 .net 库，并且在有关如何序列化集合的文档中:

james.newtonking.com/projects/json/help/html/SerializingCollections.htm

最终结果不包括父节点的名称，我的 Mustache 模板定义中缺少该名称:

[
  {
    "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
  }
]

这是我想念的吗？我的数据中的“repo”父节点，以便我可以迭代我的模板？

在此先感谢您的时间。

-ed

Answer 1

根据@stealth 关于这个问题 Mustache.js: Iterate over a list received via json

    {{ #. }}
        <b>{{Name}}</b>
    {{ /. }}

请注意，与@stealth 答案的唯一区别是“#”而不是“/”。