javascript - 使用handlebars.js显示多个json对象的值

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/