胡子JS模板使用JSON收集

你好，这是我第一次使用MustacheJS用JSON web服务在.NET胡子JS模板使用JSON收集

目前，我挣扎，我似乎无法找到我在做什么错误的设置这个简单的例子尝试：

我的web服务returing以下字符串：

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

我看到模板SETN ok了，所以做的数据，相同的值，我张贴以上，但.render函数返回：

我似乎它不喜欢的数据。

到目前为止，我已经看到了前来为以下结构的内联数据的所有例子：

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

然后模板这样定义：

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

但是，对唯一的区别我的数据是，我没有像“回购”的“父母”

在服务器端，我使用名为JSON.net的.net库和文档中的集合是如何erialized：

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 
    } 
]

这是我失踪？从我的数据“回购”父节点，所以我可以迭代我的模板？

提前感谢您的时间。

-ed

来源

2012-08-05 user1577704

简短的回答：是

长回答：出于安全原因[1]，你需要用你的JSON阿雷对象中的反正。对于Mustache或任何其他库能够访问您的数组，您需要至少拥有一个可以将迭代器作为基础的父键。
您样本上的“回购”键是您需要告诉胡须“去回购回购密钥内的数组”的助手，否则您无法告诉模板您想输出什么其中

[1]这只是你可以找到为什么你需要用你的JSON响应中的对象http://incompleteness.me/blog/2007/03/05/json-is-not-as-safe-as-people-think-it-is/

来源

2012-08-06 03:18:57 gonchuki

感谢回答@gonchuki，到目前为止，我看到的唯一问题是JSON.net序列化我的对象的方式，因为它可以将它包装在父节点周围。 – user1577704 2012-08-06 17:28:07

在一般情况下，您可以在通过JSON序列化程序获取数组之前将数组封装到匿名对象中，以便在反序列化时只有一个包含要使用的数组的对象（包含'repo'）你的模板。 – gonchuki 2012-08-07 12:44:22

每@stealth在这个问题上Mustache.js: Iterate over a list received via json

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

许多资源之一

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

来源

2013-04-02 16:37:17 marty

我无法让它工作，任何其他设置，你们建议 – Matt 2013-09-02 13:07:00

最后找到了一个简单的工作，建议在下面的链接通过Amit，http://stackoverflow.com/questions/9058774/handlebars-mustache-is-there - 一种内置的方式到循环的属性 - – Matt 2013-09-02 15:19:19

只需带上您的Web服务数据并添加一个像这样的父节点。 mustacheFormattedData = {'parenkey'：网络服务数据}; – Matt 2013-09-02 15:20:35

line data = {'roles'：data};是最关键的。它连接的关键是通过网页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文章任何其他来源返回的数据可以在这里找到

在线过滤器对于基本GRID使用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 0123网格http://www.techguides.in/enable-sorting-in-a-grid-bound-using-mustache-js/

来源

2013-09-02 15:23:31 Matt

胡子JS模板使用JSON收集

回答

相关问题