Пыль - цикл по данным JSON

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

ШАБЛОН:

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

Answer 1

Я никогда раньше не использовал пыль, но, надеюсь, смогу немного помочь.

Во-первых, вы очищаете все в.dust-info, изменяя innerHTML.dust-info каждый раз, когда вы проходите через $.each

попробуйте это как шаблон

{#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 - лучший способ зацикливания данных и отображения списка данных в шаблоне пыли.