Данные рендеринга метеора из удаленного вызова API

Я работаю над проектом, в котором пытаюсь преобразовать данные из Fieldbook через их API в шаблон 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(){
};

person EthanHaley    schedule 21.03.2018    source источник


Ответы (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
  });
})
person Jeffrey Flynt    schedule 23.03.2018