MeteorJS：在返回 API 结果时加载微调器答案

【问题标题】：MeteorJS: Load spinner while API results are returnedMeteorJS：在返回 API 结果时加载微调器
【发布时间】：2014-03-13 11:24:23
【问题描述】：

我有一个使用 XML 数据源的应用程序。

用户可以从下拉列表中选择一个类别，然后调用 API 来拉回 XML 数据源进行处理。 A) 如何使用数据更新我的前端集合？ B) 如何在集合更新时显示微调器？

JavaScript

var getJobsByIndustry = function(onet) {
  if(typeof(onet) === "undefined")
      alert("Must include an Onet code");

  var url = "onet=" + onet;

  Meteor.call('retrieveJobs', url, function(error, results){
    console.log(results)
  });
};

Template.selector.events({
  'click div.select-block ul.dropdown-menu li': function(e) {
    var selectedIndex = $(e.currentTarget).attr("rel");
    var val = $('select#industryPicker option:eq(' + selectedIndex + ')').attr('value');
    var oldVal = Session.get('currentIndustryOnet');

    if(val != oldVal) {
      Session.set('currentIndustryOnet', val);
      Session.set('jobsLoaded', false);
      getJobsByIndustry(val);
    }
  }
});

模板：

<template name="list">
  <div class="col-md-12">
    {{#if jobsLoaded}}
      <ul class="list-group" id="jobs">
        {{#each jobs}}
          <li>
            <span class="pull-right">{{address}}</span>
            <span id="jobTitle">{{title}}</span>
            <span id="company">{{company}}</span>
            <span id="date"><em>{{dateacquired}}</em></span>
          </li>
        {{/each}}
      </ul>
    {{else}}
      {{> spinner}}
    {{/if}}
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-2">
          <select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
            <option value="10">10 Per Page</option>
            <option value="25">25 Per Page</option>
            <option value="50">50 Per Page</option>
            <option value="100">100 Per Page</option>
          </select>
        </div>

        <div class="col-md-10">
          {{{pagination}}}
        </div>
      </div>
    </div>
  </div>
</template>

【问题讨论】：

标签： meteor

【解决方案1】：

如果您可以将后端移至 Mongo，而不是自己异步处理 XML，那就太好了。但是，您可以通过以下步骤完成此操作：

当您进行 API 调用时，将反应变量（例如 Session 中的值）设置为某个值以指示它正在被加载。
当 API 调用返回时，处理数据并将其插入到集合中（如果正在重复使用，则清除之前存在的所有内容）。
再次设置此变量以指示已加载。

这个用例与Meteor.subscribe 非常吻合，但您必须自己进行类比。要显示微调器，只需在模板中使用反应变量：

<template name="userList">
    <div class="well well-skinny user-list scroll-vertical">
        {{#if loaded}}
            Users:
            {{#each users}}
            {{> userPill}}
            {{/each}}
        {{else}}
            {{> spinner}}
        {{/if}}
    </div>
</template>

loaded 定义为

Template.userList.loaded = -> Session.equals("userSubReady", true)

我从我的应用程序中提取了这个示例，它在多个地方使用了微调器 (https://github.com/mizzao/CrowdMapper/tree/master/client/views) 以及 Meteor 的 spin.js 包：https://github.com/SachaG/meteor-spin。如果您有兴趣，请查看我链接的代码以获取更多详细信息。

【讨论】：

非常感谢您的帮助！！