Question

我试图显示来自两个单独的ajax调用的数据。

我开始尝试使用handlebars.js并设法显示数据，但只能通过一次调用。如何重构我的代码以显示第二次调用的数据？

HTML：

<header>
  <img id="twitch-logo" src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Twitch_logo_%28wordmark_only%29.svg">
</header>

<div id="result-placeholder"></div>
<script type="text/handlebars-template" id="handlebars-template"> 
  {{#each this}}
  <div class="result-wrapper">
    <a href="{{channel.url}}" target="_blank">
      <div><img src="{{channel.logo}}" class="result-logo"></div>
      <div class="result-name">User: {{channel.display_name}}</div>
      <div class="result-game">Currently streaming: {{channel.game}}</div>
    </a>
  </div>
  {{/each}}
</script>

JS：

var streamers = ['monstercat', 'lirik'];

function getStream(name) {
  return $.ajax('https://api.twitch.tv/kraken/streams/' + name + '?callback=?', { dataType: 'JSON' });
}

function displayStream(data) {
  var $placeHolder = $("#result-placeholder");
  var handlebarsTemplate = $("#handlebars-template").html();
  var templateCompile = Handlebars.compile(handlebarsTemplate);
  $placeHolder.html(templateCompile(data)); 
}

streamers.map(function(element) {
  getStream(element)
    .then(displayStream);
});

Answer 1

看起来您正在使用jQuery来执行流的http提取。我建议查看jQuery API，并使用例如jQuery.when（deferreds）来组合2个或更多资源的异步提取：

https://api.jquery.com/jquery.when/

使用handlebars.js显示来自多个json对象的值

1 个答案: