Erlaubt Handlebars.js dynamische Vorlagen?

Question

Ich habe begonnen, mit der Spotify-API als eine persönliche Lernübung zu spielen und begann mit dem Anfänger-Tutorial.

Der angegebene Beispielcode verwendet lenker.js für Vorlagen, und ich denke, es ist ziemlich cool. Wie auch immer, ich kann keinen Weg finden, das zu tun, was ich erreichen möchte.

Dies ist meine Vorlage

<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> 

ich den folgenden Aufruf an die Spotify-API tue. Bei Erfolg wird es die Vorlage mit den JSON-Antwortdaten füllen, die dann in einem Platzhalter div gesetzt werden den Benutzer

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

SO die Daten anzuzeigen, was ich versuche, herauszufinden, wie zu tun ist, um meine Vorlage zu bauen in einer Weise, die darauf basiert, wie viele Spuren zurückgegeben werden.

Nehmen wir an, ein Benutzer hat spotify in einer Woche nicht verwendet und hört dann 3 Lieder. dann möchte ich 3 Lieder angezeigt bekommen.

wenn sie 10 hörten, möchte ich 10 angezeigt.

Ich bin mir einfach nicht sicher, wie man die Vorlage dynamisch macht.

Ich brauche nicht die direkte Antwort nur einen Stoß in die richtige Richtung. Jede Hilfe ist apprecaited.

Answer 1

Ich gehe davon aus, dass Ihr Code ohne Fehler funktioniert. Entfernen Sie <p>{{items.0.track.artists.0.name}} - {{items.0.track.name}}</p> und versuchen Sie den folgenden Code.

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