鬍子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收集

回答

相關問題