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

嗨，这是我第一次尝试在.net中将MustacheJS与JSON Web服务结合使用

目前我正在努力，我似乎找不到我做错了什么，举一个基本的例子：

My Webservice正在返回以下字符串：

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

我已通过此网站验证了其语法：

下面是我正在使用的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);
                }
            })

        }
    )
});

我看到模板设置为ok，数据也设置为ok，与我上面发布的值相同，但.render函数正在返回：我似乎不喜欢数据

到目前为止，我看到的所有内联数据示例如下所示：

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

然后是定义如下的模板：

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

这就是我错过的吗？从我的数据中删除“repo”父节点，以便我可以迭代我的模板

提前感谢您抽出时间

---

-ed

简短回答：是

详细回答：出于安全原因[1]，无论如何，您都需要将JSON aray包装在对象中。要使Mustach或任何其他库能够访问您的数组，您需要至少有一个父键，您可以基于该父键创建迭代器。
样本上的“repo”键是您需要告诉mustach“去迭代repo键内的数组”的助手，否则您无法告诉模板您想在哪里输出什么

---

[1] 关于为什么需要将JSON响应封装在对象中，这只是您可以找到的众多资源之一。简短回答：是

详细回答：出于安全原因[1]，无论如何，您都需要将JSON aray包装在对象中。要使Mustach或任何其他库能够访问您的数组，您需要至少有一个父键，您可以基于该父键创建迭代器。
样本上的“repo”键是您需要告诉mustach“去迭代repo键内的数组”的助手，否则您无法告诉模板您想在哪里输出什么

---

[1] 这只是关于为什么需要将JSON响应包装在对象中的许多参考资料之一

{{}
{{Name}}
{{ /. }}

---

请注意，与@steave的答案唯一不同的是，在这个问题上，每个@steave的答案都是“#”而不是“/”

{{}
{{Name}}
{{ /. }}

---

请注意，与@steave的答案唯一不同的是“#”而不是“/”

行数据={'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的基本网格内联过滤器

主细节网格随需应变数据加载：使用Mustache.JS

使用MustacheJs对网格进行排序

---

行数据={'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的基本网格内联过滤器

主细节网格随需应变数据加载：使用Mustache.JS

使用MustacheJs对网格进行排序

---

谢谢@gonchuki的回答，到目前为止，我看到的唯一问题是JSON.net序列化我的对象的方式，因为它不会将它包装在父节点上。在一般情况下，您可以在通过JSON序列化程序之前将数组包装成匿名对象，这样在反序列化时，您就有一个只有一个键的对象（比如说

repo

）其中包含要在模板上使用的数组。感谢@gonchuki的回答，到目前为止，我看到的唯一问题是JSON.net序列化我的对象的方式，因为它不会将其环绕在父节点上。在一般情况下，您可以在通过JSON序列化程序之前将数组打包为匿名对象，以便在反序列化时序列化只有一个键的对象（比如说

repo

）它包含您要在模板上使用的数组。我无法使它工作，您建议的任何其他设置最终找到了Amit在以下链接中建议的简单解决方法，只需获取web服务数据并添加这样的父节点。mustacheFormattedData={'parenkey'：web服务数据}；我无法让它工作，你们建议的任何其他设置最终找到了Amit在以下链接中建议的简单解决方法，只需获取web服务数据并添加这样的父节点即可；

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

$.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);

        }
    });