Handlebars.js는 동적 템플릿을 허용합니까?

Question

Spotify API를 개인 학습으로 시작하여 초보자 가이드로 시작했습니다.

주어진 예제 코드는 템플릿에 handlebars.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에 대한 다음 호출을 수행하고있다. 성공하면 그 다음

 $.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(); 
      } 
     }); 

그래서 제가하는 방법을 알아 내려고 노력하고 있어요 것은 내 템플릿을 구축하는 사용자에게 데이터를 표시하는 자리 표시 자 DIV에 넣어 가도록 JSON 응답 데이터와 템플릿을 채울 것입니다 얼마나 많은 트랙이 반환되는지를 기반으로합니다.

사용자가 1 주일 동안 spotify를 사용한 다음 3 곡을 청취한다고 가정 해 보겠습니다. 3 곡을 표시하고 싶습니다.

그들이 들으면 10 명이 표시됩니다.

동적 템플릿을 만드는 방법을 모르겠습니다.

올바른 방향으로 밀어 넣기 만하면됩니다. 어떤 도움도 감사드립니다.

Answer 1

코드가 오류없이 작동한다고 가정합니다. <p>{{items.0.track.artists.0.name}} - {{items.0.track.name}}</p>을 삭제하고 아래 코드를 시도하십시오.

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