流星在等待數據渲染Blaze模板之前

我在儀表板上有多個圖表，顯示計數，分組等等。後端數據有超過100萬行。我決定不使用訂閱。我不需要對圖表進行反應式更新。流星在等待數據渲染Blaze模板之前

我的服務器方法正在使用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

我希望我解釋清楚這個問題，我的嘗試。有什麼想法嗎？

來源

2016-01-24 SudiB

我相信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. 
    }); 
}

這將允許你使用反應變量並在回調中適當地設置狀態。

來源

2016-01-24 18:32:04

我正在從onCreated進行初始化調用。通過傳遞'this'來將模板的引用傳遞給方法。我現在可以適當地設置被動變量。但即使數據檢索時狀態發生變化，圖表也不會呈現。我是否必須觸發重繪圖表？ – SudiB

流星在等待數據渲染Blaze模板之前

回答

相關問題