灰塵 - 通過json數據循環

我非常卡在這裏。我使用灰塵作爲模板編譯器，但無論什麼原因，我只從我的JSON中返回一個值，它不會循環並返回所有內容。所以我得到的是「DWade」關於發生什麼事情的任何想法？粉塵新手所以代碼示例真的很有幫助。灰塵 - 通過json數據循環

JSON：

{ 
"locations": [ 
{ 
    "userName": "MKelly", 
    "hours":"9-5" 
}, 
{ 
    "userName": "MReynolds", 
    "hours":"10-2" 
}, 
{ 
    "userName": "DWade", 
    "hours":"9-9" 
} 
] 
}

這裏是我的jQuery：

var compiled = dust.compile($('.dust-info').html(), "tmp_skill"); 
dust.loadSource(compiled); 

    $.getJSON("/services/userInfo?" + userTypes, function(data) {  
     $.each(data.locations, function(key, val) { 
     dust.render("tmp_skill", val, function(err, out) { 
     //HTML output 
     $('.dust-info').html(out); 
     }); 
    });

模板：

<div class="dust-info"> 
    {userName} 
    {hours} 
</div>

來源

2014-05-22 Delmon Young

我從來沒有真正使用的防塵過，但希望我能有點幫助。

首先，你是每次穿過$.each時間變化的.dust-信息的innerHTML清除內.dust-信息

一切

嘗試以此爲模板

{#locations} 
    <div class="dust-info"> 
     {userName} {hours} 
    </div> 
{:else} 
    No Location 
{/locations}

嘗試一下這裏http://akdubya.github.io/dustjs/ - 將模板粘貼到1並將模板數據粘貼到3中。

不要忘記，在使用它之前，您需要先編譯模板。

你應該能夠做到這一點之後

dust.render("tmp_skill", data.locations, function(err, out) { 
    //append generated output to body 
    $(body).append(out); 
})

這個例子就追加輸出到身體

來源

2014-05-22 23:20:07

謝謝，你發送的東西似乎工作，但是我的代碼有什麼問題？當我嘗試將它添加到我的時候，我仍然只得到一個結果。 –

檢查我編輯的答案 –

太棒了！非常感謝！ –

與andyw以上您的意見，你有1分的結果，因爲在JavaScript代碼，您使用這個：$（'。dust-info'）。html（out）;使用.html（out）：：js將會找到class'dust-info'的標籤，然後循環data.locations並且仍然替換這個標籤的html，不會追加 - 或者顯示爲列表，所以這就是爲什麼你只看到1結果。 andyw的回答是在塵埃模板中循環數據和顯示數據列表的最佳方式。

來源

2014-06-13 03:18:25 kate

灰塵 - 通過json數據循環

回答

相關問題