Question

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

当我从助手中的请求中管理日志response.item时，我可以准确地获取所需的数据，我只是不了解如何将其获取到模板中...？

<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();
            }
        });
      }

Answer 1

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

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

如何从车把帮手发出Ajax请求？

1 个答案: