Question

我非常困在这里。我使用灰尘作为模板编译器，但无论出于何种原因，我只是从我的json返回一个值，它不会循环并返回所有内容。所以我得到的只是“DWade”任何有关正在发生的事情的想法？尘埃新手所以代码样本真的很有帮助。

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);
      });
    });

TEMPLATE：

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

Answer 1

我之前从未真正使用过灰尘，但希望我能帮上忙。

首先，每次通过$.each

时，通过更改.dust-info的innerHTML来清除.dust-info中的所有内容

将此作为模板

{#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);
})

此示例只是将输出附加到正文

Answer 2

正如您对上面的andyw所做的评论，您得到了1个结果，因为在javascript代码中，您使用了这个：$（'。dust-info'）。html（out）; 使用.html（out）：js将找到带有'dust-info'类的标签，然后使用data.locations循环并仍然替换此标签的html，不附加 - 或显示为列表，这就是为什么你只看到1个结果。 andyw的答案是在灰尘模板中循环数据和显示数据列表的最佳方法。

灰尘 - 通过json数据循环

2 个答案: