Handlebars.js允許動態模板嗎？

我已經開始使用Spotify API作爲個人學習練習，並從初學者教程開始。Handlebars.js允許動態模板嗎？

給出的示例代碼使用了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的Spotify。如果成功，將填補，然後放入一個佔位符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(); 
      } 
     });

SO什麼，我試圖找出如何做的是建立我的模板，JSON響應數據的模板以基於返回多少曲目的方式。

可以說用戶在一週內沒有使用過spotify，然後收聽3首歌曲。那麼我想要顯示3首歌曲。

如果他們聽了10我要10顯示。

我只是不知道如何使模板動態。

我不需要直接的答案只是在正確的方向推動任何幫助apprecaited。

來源

2017-03-13 TonyO

沒有說你必須這樣做在_single_模板擴張 - 說不定您必須展開每個軌跡模板爲每個軌道，串聯的，然後把結果到模板的全格的內容？ – barny

我假定你的代碼沒有任何錯誤地工作。刪除<p>{{items.0.track.artists.0.name}} - {{items.0.track.name}}</p>並嘗試下面的代碼。

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

來源

2017-03-13 14:54:06

工作完美。你能告訴我這是如何工作的嗎？那是特定於handlebars.js的東西嗎？ – TonyO

我想我現在明白了。它是針對JSON響應中的「項目」數量執行的每個循環。我只是不太明白語法。我從來沒有見過#each和/ each。 – TonyO

是的，你說得對。這是特定於把手的東西。它適用於每個循環。有關更多信息，請查看此鏈接[Handlebars Built-in Helpers]（http://handlebarsjs.com/builtin_helpers.html） –

Handlebars.js允許動態模板嗎？

回答

相關問題