不了解 JSON 对象键在 node.js 应用程序中的处理方式

Question

这是一个新手问题。

我测试了 web-api-auth-examples: https://github.com/spotify/web-api-auth-examples

它按预期工作，但我不明白 html 代码如何获取正确的数据

<dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>

在这种情况下，数据来自 app.js 中的响应：

var options = {
  url: 'https://api.spotify.com/v1/me',
  headers: { 'Authorization': 'Bearer ' + access_token },
  json: true
};
request.get(options, function(error, response, body) {
   console.log(body);
});

响应是一个 JSON 对象 (https://developer.spotify.com/documentation/web-api/reference/object-model/#user-object-private) 它有一个 display_name 的键，它是包含以下内容的字符串：

The name displayed on the user’s profile. null if not available.

我不明白的是 html 文件是如何通过 html 代码中的键名来获取 JSON 对象内容的。

Answer 1

他们正在使用 handlebars，它可以进行数据绑定。参见 index.html

中的第 62 行

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>

换句话说，看到对 {{display_name}} 的引用被替换为给定对象键的实际值。这是通过车把模板完成的，该模板定义在第 34 行和第 52 行之间，位于 script 标签内：

<script id="user-profile-template" type="text/x-handlebars-template">
  <h1>Logged in as {{display_name}}</h1>
  <div class="media">
    <div class="pull-left">
      <img class="media-object" width="150" src="{{images.0.url}}" />
    </div>
    <div class="media-body">
      <dl class="dl-horizontal">
        <dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>
        <dt>Id</dt><dd>{{id}}</dd>
        <dt>Email</dt><dd>{{email}}</dd>
        <dt>Spotify URI</dt><dd><a href="{{external_urls.spotify}}">{{external_urls.spotify}}</a></dd>
        <dt>Link</dt><dd><a href="{{href}}">{{href}}</a></dd>
        <dt>Profile Image</dt><dd class="clearfix"><a href="{{images.0.url}}">{{images.0.url}}</a></dd>
        <dt>Country</dt><dd>{{country}}</dd>
      </dl>
    </div>
  </div>
</script>

仔细阅读 Handlebars，我相信您能弄明白。 :)

不了解 JSON 对象键在 node.js 应用程序中的处理方式

Do not understand how the JSON object keys is handled in a node.js app

html

json

spotify

node.js