来自远程 API 调用的 Meteor 渲染数据答案

【问题标题】：Meteor Render Data from Remote API Call来自远程 API 调用的 Meteor 渲染数据
【发布时间】：2018-03-24 05:02:35
【问题描述】：

我正在做一个项目，我试图通过他们的 API 将来自 Fieldbook 的数据呈现到 Meteor 模板中。我可以成功完成 API 调用并返回数据，但是当我等待异步 API 调用时，我的模板已经尝试呈现我的数据表。我正在尝试使用响应式表包 (https://atmospherejs.com/aslagle/reactive-table) 来呈现来自调用的数据。有没有办法实现这个目标？感谢您的帮助。

HTML 模板：

<template name="customers">
    <div class="wrapper wrapper-content animated fadeInRight row  border-bottom white-bg dashboard-header">
        <h1>Customers</h1>
        <div class="col-sm-8 text-center">
            <button class="btn btn-primary btn-new-po">New Customer</button>
            &nbsp;
            <a class="btn btn-primary btn-new-wo">New Contact</a>
            &nbsp;
        </div>
        <div class="col-sm-8 text-center">
            <button class="btn btn-primary btn-view-po">View Customers</button>
            &nbsp;
            <a class="btn btn-primary btn-view-wo">View Contacts</a>
            &nbsp;
        </div>
        {{> reactiveTable settings=customerTableSettings rowsPerPage=25}}
    </div>
</template>

JS 文件：

import './customers.html';
import swal from 'sweetalert2';

var Fieldbook = require('node-fieldbook');

Template.customers.onCreated(function listsShowPageOnCreated() {
    var book = new Fieldbook({
        username: '{fieldbook key name}',
        password: '{fieldbook password}',
        book: '{bookId}'
    });

    book.getSheet('customers').then((data) => {
        console.log(data);
        this.data.customers = data;
    }).catch((error) => {
        console.log(error);
    });

});

Template.customers.helpers({
    customerTableSettings: function() {
        return {
            collection: this.customers,
            class: 'table table-striped table-hover col-sm-12 eventsTable',
            fields: [ 
                { key: 'short_name', label: 'Short Name', },
            ]
        }
    },
});

Template.customers.events({

});

Template.customers.rendered = function(){
};

【问题讨论】：

标签： api asynchronous meteor

【解决方案1】：

我会将代码放在 onRendered 中：

Template.customers.onRendered(function() {
...code here
});

例如，在我的应用程序中，我使用了handsontable，这就是我在数据准备好后导入它的方式。

Template.page.onRendered(function() {
   import('../hands.js').then(({default: Handsontable}) => {
   let hot_scroll_data = Handsontable.helper.createSpreadsheetData(250, 40);
   let hot_scroll = document.getElementById('hot_scroll');
   let hot_scroll_init = new Handsontable(hot_scroll,{
      data: data,
      stretchH: 'all',
      rowHeaders: true,
      columns: dynamicColumns
  });
})

【讨论】：