Question

我有一个使用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>

Answer 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。如果您有兴趣，请查看我链接的代码以获取更多详细信息。

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

1 个答案: