Разрешает ли Handlebars.js динамические шаблоны?

Question

Я начал играть с Spotify API в качестве личного упражнения и начал с учебника для начинающих.

Приведенный пример кода использует handle bars.js для шаблонов, и я на самом деле думаю, что это довольно круто. как бы то ни было, я не могу найти способ сделать то, что я хочу достичь.

Это мой шаблон

<script id="recently-played-template" type="text/x-handlebars-template">

    <div class="">
      <dl class="dl-horizontal">
        <h3> Recently Played </h3>

    <p>{{items.0.track.artists.0.name}} - {{items.0.track.name}}</p> 

      </dl>
    </div>
  </div>
</script> 

Я делаю следующий вызов API spotify. В случае успеха он заполнит шаблон теми ответными данными JSON, которые затем помещаются в заполнитель div для отображения данных пользователю.

        $.ajax({
            url: 'https://api.spotify.com/v1/me/player/recently-played',
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              recentlyPlayedPlaceholder.innerHTML = recentlyPlayedTemplate(response);


              $('#login').hide();
              $('#loggedin').show();
            }
        });

И вот что я пытаюсь выяснить, как это сделать - это построить мой шаблон так, чтобы он основывался на количестве возвращаемых треков.

Допустим, пользователь не использовал spotify в течение недели, а затем прослушивает 3 песни. тогда я хочу показать 3 песни.

если они слушали 10, я хочу, чтобы 10 отображалось.

Я просто не уверен, как сделать шаблон динамическим.

Мне не нужен прямой ответ, просто толчок в правильном направлении. Любая помощь приветствуется.

Answer 1

Я предполагаю, что ваш код работает без каких-либо ошибок. Удалить <p>{{items.0.track.artists.0.name}} - {{items.0.track.name}}</p> и попробуйте код ниже.

  {{#each items}}
    <li>{{track.name}}</li>
  {{/each}}