Meteor 在渲染 Blaze 模板之前等待数据

Question

我在仪表板上有多个图表，显示计数、分组依据等。后端数据有超过百万行。我决定不使用订阅。我不需要对图表进行被动更新。

我的服务器方法正在使用 rawCollection，运行聚合以获取结果，并且我正在通过我在客户端回调中设置的会话变量将数据分配给我的图表对象。

服务器方法：

function purchasedItemDollarsByCategory () {
    Future = Npm.require('fibers/future');
    var iCat = new Future();
    Purchasing.rawCollection().aggregate([
            {
                $project: {
                    "GLCodeName": 1,
                    "Amount" : 1
                }
            },
            {
                $group : {
                    _id: "$GLCodeName",
                    amount: { $sum : "$Amount" }
                }
            },
            {
                $sort :
                    {_id : 1}
            }
        ],
        function(err,docs) {
            if (err) {
                iCat.throw(err);
            } else {
                iCat.return(docs);
            }
        }
    );
    return iCat.wait();
}

在模板中，我在调用

function getPurchasedItemDollarsByCategory () {
    Meteor.call('purchasedItemDollarsByCategory', function (err, results) {
        if (err) {
            toastr.error('Something went wrong. Could not retrieve purchased Item  count');
            return false;
        } else {
            Session.set( 'purchasedItemDollarsByCategory', results);
        }
    })
}

现在，我正在使用另一个函数来塑造图表的数据：

function getPurchasedItemCountByCategoryChartData () {
    var allItemsPurchasedByCategory = Session.get('purchasedItemCountByCategory');
    var allGlCodes = [];
    var allItemPurchasedCountDataPoints = [];
    var contractedPurchasedCountDataPoints = [];
    _.forEach(allItemsPurchasedByCategory, function(d) {
        allGlCodes.push(d._id);
        allItemPurchasedCountDataPoints.push(d.items);
    });
    Session.set('allGlCodes', allGlCodes);
    Session.set('allItemPurchasedCountDataPoints', allItemPurchasedCountDataPoints);
}

现在我将“allGlCodes”和“allItemPurchasedCountDataPoints”分配给模板 onRendered 事件中的 highcharts 配置对象。

服务器方法工作正常。客户端也在获取数据。但是渲染是在数据返回之前发生的。所以图表呈现为空。但是，如果我在应用程序周围单击并返回此页面，我会看到数据。我不确定我是否完全理解正在发生的事情，但我猜测数据最终会返回并填充会话变量，并且由于会话是粘性的，我会在延迟后看到数据。

我不想在数据返回之前进行渲染。所以我在 Template onCreated 中创建了一个 ReactiveVar。

this.isLoadingA = new ReactiveVar( false );
this.isLoadingB = new ReactiveVar( false );
this.isLoading = new ReactiveVar ( this.isLoadingA && this.isLoadingB );

现在的问题是我应该在哪里将这些设置为 false。我有多个服务器调用正在进行。我可以为每个调用设置一个 isLoading 并创建一个 allDataReady 变量。但是如果我尝试在我的成功回调中设置服务器方法：

Template.instance().isLoadingA.set( true );

我收到以下错误：

TypeError: Cannot read property 'isLoadingA' of null

我希望我能清楚地解释问题和我的尝试。有什么想法吗？

Answer 1

我相信 Template.instance() 在 Meteor 方法的回调中是不可用的。你可以这样做：

exampleHelper() {
    var template = Template.instance();
    Meteor.call( 'example', function(error, results) {
        console.log(Template.instance()); // Undefined
        console.log(template);  // What you want in order to set your reactive variables.
    });
}

这将允许您使用响应式变量并在回调中适当地设置状态。