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允许动态模板吗？

回答

相关问题