Question

我正在开展一个项目，我正在尝试通过他们的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(){
};

Answer 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
  });
})

Meteor从远程API调用渲染数据

1 个答案: