MeteorJS：在返回API結果時加載微調器

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

這將是巨大的，如果你能後端移動到蒙戈，而不是你自己處理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> 

爲

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

我從我的應用程序，它使用紡紗在幾個地方拉到這個例子loaded定義（https://github.com/mizzao/CrowdMapper/tree/master/client/views）以及Meteor的spin.js軟件包：https://github.com/SachaG/meteor-spin。如果您有興趣，請查看我鏈接的代碼以獲取更多詳細信息。