Handlebars.js 是不是允许动态模板?

Posted

技术标签:

【中文标题】Handlebars.js 是不是允许动态模板?【英文标题】:Does Handlebars.js allow for dynamic templates?Handlebars.js 是否允许动态模板? 【发布时间】:2017-08-03 15:11:49 【问题描述】:

我已经开始使用 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。

我只是不确定如何使模板动态化。

我不需要直截了当的答案,只需朝着正确的方向前进。感谢任何帮助。

【问题讨论】:

没有什么说您必须在 single 模板扩展中执行此操作 - 也许您必须为每个曲目扩展一个每个曲目的模板,将它们连接起来,然后将结果到完整 div 内容的模板中? 【参考方案1】:

我假设您的代码运行正常,没有任何错误。 删除&lt;p&gt;items.0.track.artists.0.name - items.0.track.name&lt;/p&gt; 并尝试下面的代码。

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

【讨论】:

完美运行。你能告诉我这是怎么工作的吗?这是handlebars.js 特有的吗? 我想我现在明白了。它是针对 JSON 响应中的“项目”数量执行的 for each 循环。我只是不太了解语法。我以前没见过#each 和/each。 是的,你是对的。这是车把特有的东西。它的工作原理类似于 for each 循环。有关更多信息,您可以查看此链接Handlebars Built-in Helpers

以上是关于Handlebars.js 是不是允许动态模板?的主要内容,如果未能解决你的问题,请参考以下文章

Django 模板中的 Handlebars.js

Handlebars.js模板

使用 handlebars.js 模板以数组中的最后一项为条件

使用 handlebars.js 制作“if x in dict(json)”语句

错误:Handlebars.js 中缺少帮助程序

markdown 在使用AJAX呈现的Handlebars.js模板文件上显示平面JSON文件中的数据。