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

Question

您好，这是我第一次尝试在 .net 中使用 MustacheJS 和 JSON Web 服务

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

我的 Web 服务正在返回以下字符串:

[
  {
    "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，基本上我想始终从 google 加载最新的 JQuery 版本，然后进行 WS 调用。

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

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

我看到模板已设置好，数据也已设置好，与我上面发布的值相同，但 .render 函数正在返回:

我似乎不喜欢数据。

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

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

然后定义一个模板，如下所示:

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

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

在服务器端，我使用一个名为 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 的答案的唯一区别是“#”而不是“/”。