Search code examples
meteoriron-router

how to properly use meteor's ironRouter waitOn?


I have abround 6000 documents in my mongo collection, which I need to load up into meteor client upon app startup. In my routes (located under app/client), I have this:

Router.map(function() {
    this.route('home', {
        path: '/',
        template: 'dashboardWrapper',
        waitOn: function() {
            return Meteor.subscribe('nasdaq');
        },
        cache: true
    });
});

My dashboardWrapper template looks like this:

<template name="dashboardWrapper">
    {{#if Template.subscriptionsReady}}
        {{> dashboard}}
    {{/if}}
</template>

My dashboard template looks like this:

<template name="dashboard">
    <div class="container">
        <h2>Priority - 1 Incidents Over Time</h2>

        <div class="row">
            <div id="yearly-bubble-chart" class="dc-chart">
                <strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
            </div>
        </div>

        <div class="row">
            <div id="gain-loss-chart">
                <strong>Days by Gain/Loss</strong>
                <a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

                <div class="clearfix"></div>
            </div>

            <div id="quarter-chart">
                <strong>Quarters</strong>
                <a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

                <div class="clearfix"></div>
            </div>

            <div id="day-of-week-chart">
                <strong>Day of Week</strong>
                <a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

                <div class="clearfix"></div>
            </div>

            <div id="fluctuation-chart">
                <strong>Days by Fluctuation(%)</strong>
                <span class="reset" style="display: none;">range: <span class="filter"></span></span>
                <a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

                <div class="clearfix"></div>
            </div>
        </div>

        <div class="row">
            <div id="monthly-move-chart">
                <strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>
                <span class="reset" style="display: none;">range: <span class="filter"></span></span>
                <a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
                   style="display: none;">reset</a>

                <div class="clearfix"></div>
            </div>
        </div>

        <div class="row">
            <div id="monthly-volume-chart">
            </div>
            <p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
        </div>

        <div class="row">
            <div>
                <div class="dc-data-count">
                    <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a
                        href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
                </div>
            </div>
            <table class="table table-hover dc-data-table">
            </table>
        </div>

        <div class="clearfix"></div>

    </div>
</template>

The relevant part of Meteor.client looks like this:

if (Meteor.isClient) {

  var ndx,data;

  Template.dashboardWrapper.onCreated( function() {
    var template = this;
    template.subscribe("nasdaq");
  });

  Template.dashboard.onCreated( function() {
          data = Nasdaq.find().fetch();
          ndx = crossfilter(data);
  });

    Template.dashboard.onRendered(function(){

        var self = this;
        self.subscribe("nasdaq", function() {
            self.autorun(function() {
                data = Nasdaq.find().fetch();
            });
        });

What I expect from this, is for the dashboard template to wait until all the data from the Nasdaq collection loads up. What happens is absolutely nothing - no data and no errors.

If I remove ironRounter all together, and refresh, I can get a couple of dozen records (out of 6000 total). Is there a way reliably force the app to wait until every single document loads up?


Solution

  • Try subscribe right before load the current template, may be it will work.

    Router.route('/dashboardWrapper/:_id', {
        name: 'dashboardWrapper',
        waitOn: function () {
            return [
                Meteor.subscribe('nasdaq')
            ];
        },
        data: function () {
            return Nasdaq.findOne(this.params._id);
    }
    });