如何从车把助手发出ajax请求？答案

【问题标题】：How to make ajax request from handlebars helper?如何从车把助手发出ajax请求？
【发布时间】：2019-03-17 09:52:28
【问题描述】：

我正在尝试为 Spotify 用户的播放列表以及这些播放列表中的所有曲目制作一个 html 表。我可以很好地获取播放列表。但是，要获取该播放列表中的曲目，我需要提出另一个请求。我目前正在使用帮助程序（get_track）来发出第二个请求，并在我遍历每个播放列表时调用它。然而它并不完全有效.. 一切都返回未定义。有一个更好的方法吗？

当我从助手中的请求中控制台记录 response.items 时，我得到了我想要的数据，我只是不明白如何将它放入我的模板中......？

<script id="playlist-template" type="text/x-handlebars-template">
  <h1>playlists</h1>
  <table>
    <tr>
      <th>playlist</th>
      <th>tracks</th>
    </tr>
    {{#playlists.items}}
      <tr>
        <td><a href="{{external_urls.spotify}}">{{name}}</a></td>
        <td>
            <table>
              <tr>
                <th>track name</th>
              </tr>
              {{log (get_track tracks.href)}}
              {{#each (get_track tracks.href)}}
                <tr>
                  <td>{{track.name}}</td>
                </tr>
              {{/each}}
            </table>
        </td>
      </tr>
    {{/playlists.items}}
  </table>
</script>




var playlistSource = document.getElementById('playlist-template').innerHTML,
playlistTemplate = Handlebars.compile(playlistSource),
playlistPlaceholder = document.getElementById('playlist');

    Handlebars.registerHelper('get_track', function(tracks){
      return $.ajax({
        url: tracks,
        headers: {
          'Authorization': 'Bearer ' + access_token
        },
        success: function(response) {
          return response.items;
        }
      });
    });
      if (access_token) {
        // render oauth info
        oauthPlaceholder.innerHTML = oauthTemplate({
          access_token: access_token,
          refresh_token: refresh_token
        });

        $.ajax({
            url: 'https://api.spotify.com/v1/me',
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              userProfilePlaceholder.innerHTML = userProfileTemplate(response);

              $('#login').hide();
              $('#loggedin').show();
            }
        });

        $.ajax({
            url: 'https://api.spotify.com/v1/me/playlists',
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              playlistPlaceholder.innerHTML = playlistTemplate({Playlists: response}); //get playlists
              console.log(response);
              $('#login').hide();
              $('#loggedin').show();
            }
        });
      }

【问题讨论】：

标签： javascript ajax handlebars.js spotify

【解决方案1】：

如果您想要从您的 ajax 请求中显示 {{track.name}}，您将无法做到。如果要定义 track.name，则必须在原始数据中定义它。您不能修改传递给车把的数据。但是，您可以做的是在您的帮助程序中返回轨道名称的值，然后它将显示在您的模板中。我对同步的最后一个疑问是：您必须同步您的请求才能在您的助手中获得返回值，否则它将为空：ajax 是异步的，因此您必须等待 ajax 请求结束一段时间循环以便为您的助手返回一个值。

我希望我已经足够清楚，否则我会尝试更准确。

【讨论】：