upgrade - Issues while trying to replace iron:router with FlowRouter (used the meteor package ostrio:flow-router-extra) - Stack

admin管理员组

文章数量:1292556

Since I want to upgrade my meteor application from meteor 2.16 to 3.0.4, I am replacing the iron:router with ostrio:flow-router-extra. But I dont see the templates rendering properly with flow:router. Any help is appreciated.

Code where routes are defined: Router.js

function renderTemplate(template, data) {
    if (currentView) {
        Blaze.remove(currentView);
    }
    currentView = Blaze.renderWithData(template, data, document.getElementById('main'));
}

FlowRouter.route('/reports/:_limit?', {
    name: 'reports',
    action(params) {
        console.log('Rendering reportsList template with limit:', params._limit);
        renderTemplate(Template.reportsList, { limit: params._limit });
    },
    subscriptions(params) {
        this.register('reports', Meteor.subscribe('reports', params._limit));
    }
});
FlowRouter.route('/reports/:_id/view', {
    name: 'reportView',
    action(params) {
        console.log('Rendering reportView template with id:', params._id);
        renderTemplate(Template.reportView, { _id: params._id });
    },
    subscriptions(params) {
        this.register('report', Meteor.subscribe('report', params._id));
    }
});

FlowRouter.route('/reports/:_id/print', {
    name: 'reportPrint',
    action(params) {
        console.log('Rendering reportPrint template with id:', params._id);
        renderTemplate(Template.reportPrint, { _id: params._id });
    },
    subscriptions(params) {
        this.register('report', Meteor.subscribe('report', params._id));
    }
});

FlowRouter.route('/reports/:_id/batchPrint', {
    name: 'batchReportWrapper',
    action(params) {
        console.log('Rendering batchReportWrapper template with id:', params._id);
        renderTemplate(Template.batchReportWrapper, { _id: params._id });
    },
    subscriptions(params) {
        this.register('report', Meteor.subscribe('report', params._id));
    }
});

FlowRouter.route('/reports/:_id/thumbnail', {
    name: 'reportThumbnail',
    action(params) {
        console.log('Rendering reportThumbnail template with id:', params._id);
        renderTemplate(Template.reportThumbnail, { _id: params._id });
    },
    subscriptions(params) {
        this.register('report', Meteor.subscribe('report', params._id));
    }
});
FlowRouter.route('/reports/:_id/edit/:step?', {
    name: 'reportWizard',
    action(params) {
        console.log('Rendering reportWizard template with id:', params._id, 'and step:', params.step);
        renderTemplate(Template.reportWizard, { _id: params._id, step: params.step });
    },
    subscriptions(params) {
        this.register('priorReportTasks', Meteor.subscribe('priorReportTasks', params._id));
        this.register('recent_report_cache', Meteor.subscribe('recent_report_cache', params._id, 1));
        this.register('reportWithoutTasks', Meteor.subscribe('reportWithoutTasks', params._id));
        this.register('reportTasks', Meteor.subscribe('reportTasks', params._id));
    },
    waitOn(params) {
        const handle = Meteor.subscribe('reportWithoutTasks', params._id);
        const taskHandle = Meteor.subscribe('reportTasks', params._id);
        Tracker.autorun(() => {
            if (handle.ready()) {
                console.log('report subscription is ready');
            }
        });
        return [handle, taskHandle];
    },
    fastRender: true
});

FlowRouter.route('/reports/:_id/report', {
    name: 'reportReport',
    action(params) {
        console.log('Rendering reportReport template with id:', params._id);
        renderTemplate(Template.reportReport, { _id: params._id });
    },
    subscriptions(params) {
        this.register('report', Meteor.subscribe('report', params._id));
    }
});

Toolbar.html:

<template name="toolbar">
  <div
    class="ui bottom {{#unless hideMenu}}visible{{/unless}} inverted labeled icon sidebar menu"
  >
  <a class="item {{isActive 'reportsList'}}" tabindex="-1" href="/reports">
      <i class="book icon"></i>
      Reports
    </a>
  </div>
</template>`

Layout.html:

<template name="layout">
  <div id="layoutContainer" class="container" style="height: 100%">
    {{#if currentUserOrOfflineModeActive }} {{> header}}
    <div
      id="main"
      class="container-fluid"
      style="height: calc(100% - {{#unless hideMenu}}140{{else}}80{{/unless}}px); padding-top: 5px; margin-top: 75px; margin-bottom: {{#unless hideMenu}}60{{else}}0{{/unless}}px; padding-left: 5px; padding-right: 5px; overflow: auto;"
    >
      {{> Templates.dync}}
    </div>

    {{> toolbar}} {{else}}
    <div id="main" class="row-fluid">{{> login}}</div>
    {{/if}}
  </div>
  <div
    class="ui small modal requireNewPasswordModal"
    detachable="false"
    style="width: 420px; height: 320px"
  >
    <div class="header">Set Password</div>
    <div class="content">
      <div id="newPasswordMessages"></div>

      <input
        id="login-password"
        type="password"
        placeholder="New Password"
        class="form-control"
      />
      <input
        id="login-password-repeat"
        type="password"
        placeholder="Repeat New Password"
        class="form-control"
      />
    </div>
    <div style="position: absolute; bottom: 0px; color: red; width: 420px">
      <div class="actions" style="position: static">
        <div class="two ui buttons">
          <div class="ui green positive button">
            <i class="checkmark icon"></i>
            Change password
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<body style="height: 100%"></body>

ReportsList.html:

<template name="reportsList">
    <style>
        #reportsTable td {
            padding: 0.3em 0.4em;
        }
        #reportsTable tr:hover {
            /*Selectable table not implemented in current version of Semantic UI*/
            background-color: #f5f5f5 !important;
        }
        #reportsTable tr.selected {
            /*Selectable table not implemented in current version of Semantic UI*/
            background-color: #e5e5e5;
        }

        #reportsList .card:hover {
            /*Selectable table not implemented in current version of Semantic UI*/
            background-color: #f5f5f5; !important;
        }
        #reportsList .card.selected {
            /*Selectable table not implemented in current version of Semantic UI*/
            background-color: #e5e5e5;
        }

    </style>
    <!--{{>configuretoolbar}}-->
    {{>configuretoolbarModal permissionObject="Reports" config=getConfig}}
    {{>reportConfigurationWizard}}

    {{#if isEqual selectedView 'grid'}}
    <div id="reportsList" class="ui link cards" style="flex-grow: 1;">
        {{#each reports}}
            {{>reportCard}}
        {{/each}}
    </div>
    {{else}}
    <div id="reportsTable" class="ui center aligned celled table">
        <table class="ui celled table">
            <col style="width: 125px;"/>
            <col/>
            <col/>
            <col style="width: 200px;"/>
            <col style="width: 200px;"/>
            <col/>
            <col style="white-space:nowrap;"/>
            <col style="white-space:nowrap;"/>
            <col style="white-space:nowrap;"/>
            <col style="white-space:nowrap;"/>
            <thead>
            <tr><th class="center aligned">Work Order</th>
                <th>Code</th>
                <th>Owner</th>
                <th>Facility</th>
                <th>Model</th>
                <th>Equipment Name</th>
                <th>Scheduled</th>
                <th>Target</th>
                <th>Progress</th>
                <th>Date Completed</th>

            </tr></thead>
            <tbody>
            {{#each reports}}
            <tr data-report_id="{{_id}}">
                <td>{{reportLabel}}</td>
                <td>{{getServiceCode}}</td>
                <td>{{getLeadPhysicistName}}</td>
                <td>{{facilityName}}</td>
                <td>{{getEquipmentTypeName}}</td>
                <td>{{getNickname}}</td>
                <td>{{momentFormatDateWithoutTimezone scheduled 'YYYY-MM-DD'}}</td>
                <td>{{momentFormatDateWithoutTimezone target 'YYYY-MM-DD'}}</td>
                <td style="text-align: center;">{{getStatus}}</td>
                <td>{{momentFormatDate completed 'YYYY-MM-DD'}}</td>
            </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
    {{/if}}
    <div id="lastReportCard" style="width: 0px; height: 0px;">
    </div>
    <div style="margin: 30px auto; width: 150px; position: absolute; bottom: 40px; left: calc(50% - 75px); z-index: 100;">
        <a class="ui big label">
            {{#if subscriptionsPending}}
                <i class="inline notched circle loading icon"></i>
            {{else}}
                <i class="inline book icon"></i>
                <span id="resultCount">{{countLabel}}</span>
            {{/if}}
        </a>
    </div>
    {{#if moreAvailable}}
        <div id="showMoreReports" style="margin: 50px auto; width: 120px;">
            <button id="loadMoreReports" class="ui button">
                Load More
            </button>
        </div>
    {{/if}}
</template>

The code was working fine with iron:router.

NOTE : I had to hardocode and use this href="/reports" in toolbar.html for the url to be redirected properly. Is there a solution for this as well

本文标签：