[英]Does Handlebars.js allow for dynamic templates?
我已经开始将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>
我正在对Spotify API进行以下调用。 成功后,它将使用该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。
我只是不确定如何使模板动态。
我不需要简单的答案,只要朝着正确的方向前进就可以了。
我认为您的代码可以正常工作。 删除<p>{{items.0.track.artists.0.name}} - {{items.0.track.name}}</p>
并尝试以下代码。
{{#each items}}
<li>{{track.name}}</li>
{{/each}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.