使用 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/

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

Show values from multiple json objects using handlebars.js

javascript

ajax

json

loops

handlebars.js