Question

嗨，这是我第一次尝试在.net

中使用带有JSON Web服务的MustacheJS

目前我正在努力，我似乎无法找到我做错了设置这个基本的例子：

我的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不是很好，基本上我想从谷歌加载最新的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

最终结果不包括父节点的名称，我的胡子模板定义中缺少这个名称：

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

关于这个问题的{@ 3} {/ 3}}

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

请注意，@ stealth答案的唯一区别是“＃”而不是“/".

Answer 2

行数据= {'roles'：data};是至关重要的。它将密钥附加到web api或任何其他数据源（如页面方法或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 aray包装在对象中。要使Mustache或任何其他库能够访问您的阵列，您需要至少有一个父键，您可以在其上建立迭代器。
您的示例中的“repo”键是您需要告诉小胡子的“帮助程序”“继续迭代repo键内的数组”，否则您无法告诉模板您想要的输出 where

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

带有JSON集合的胡子JS模板

3 个答案: