带有 JSON 集合的 Mustache JS 模板

Question

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

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

我的 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 答案的唯一区别是“#”而不是“/”。

Answer 2

行 data = { 'roles': data };是最关键的。它将密钥附加到由 web api 或任何其他数据源（如 pagemethods 或 web 服务）返回的数据

$.ajax({
        dataType: "json",
        url: '/api/TestApi/GetAllRole',
        success: function (data) {          
            data = { 'roles': data }; // formatting the data to support the mustache    format  
            var html = Mustache.to_html($('#RoleTemplate').html(), data);
            $('#tblRole').append(html);

        }
    });

在这里可以找到我关于 MustacheJs 的几篇文章

使用 MUSTACHEJS 的基本网格的内联过滤器 http://www.techguides.in/add-inline-filter-to-basic-grid-using-mustache/

按需数据加载主详细信息网格：使用 Mustache.JS http://www.techguides.in/master-details-grid-on-demand-data-loading-using-mustache-js/

使用 MustacheJs 对网格进行排序 http://www.techguides.in/enable-sorting-in-a-grid-bound-using-mustache-js/

Answer 3

简短回答：是的

长答案：出于安全原因 [1]，无论如何您都需要将 JSON 数组包装在一个对象中。为了让 Mustache 或任何其他库能够访问您的数组，您需要至少有一个父键，您可以将其作为迭代器的基础。
示例中的“repo”键是您需要告诉 mustache“去迭代 repo 键内的数组”的助手，否则您无法告诉模板 什么 你想要输出哪里

[1] 这只是您可以找到的众多资源之一，这些资源说明了为什么需要将 JSON 响应包装到对象 http://incompleteness.me/blog/2007/03/05/json-is-not-as-safe-as-people-think-it-is/