尝试从路由器迁移到Iron-Router

问题描述：

我正在尝试从路由器迁移到Iron-Router，但是我的整个页面都无法正确显示.唯一呈现的模板是从>产量"中产生的模板.我的HTML文件中的任何其他代码均未呈现.

I am trying to migrate from router to iron-router but having a problem with my entire page not rendering correctly. The only template that is rendering is what is produced from the "> yield". Any of the other code in my HTML, file is not rendered.

我希望页面上的所有内容保持不变.但我希望收益率中的模板根据URL进行更改.我在配置中缺少什么以使其具有这种行为?

I would like everything on the page to remain static. But I want the template in yield to change based on the url. What am I missing in the configuration to make it behave that way?

HTML:

<head>
  <title>carpool</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>  
  <div id="wrap">
    {{> page}}
    <div class="container-fluid">
      <div class="row-fluid">
    <div class="span12">
      {{> header}}      
    </div>   
    <div class="row-fluid">
      <div class="span10">
        <template name="mainContent">
          {{> yield}}
        </template>
      </div>
      <div class="span2">
        {{#if currentUser}}
        {{> leaderboard}}
        {{/if}}
      </div>
    </div>
      </div>
    </div>
    <div id="push"></div>
   </div>

  <div id="footer">
    <div class="container">
      {{> footer}}
    </div>
  </div>
</body>

<template name="page">
  {{#if showAddEventDialogue}}
    {{> addEvent}}
  {{/if}}
  {{#if showConfigLoginService}}
    {{> configureLoginService}}
  {{/if}}
  {{#if showCalendarEventDetailsDialogue}}
    {{> calendarEventDetailsDialogue}}
  {{/if}}
</template>

JS:

/* Only execute if this is the client */
if (Meteor.isClient) {

// Client subscriptions
Meteor.subscribe('allCarpoolEvents');
Meteor.subscribe('allCarpoolDebts');
Meteor.subscribe('allUsers');

// Do not render the <body>
Router.configure({
  autoRender: true
});

// Define Routes
Router.map(function () {
  this.route('calendar', {
    path:'/calendar*',
    template: 'mainContent',
    layoutTemplate: 'calendar'
  });
  this.route('list', {
    path:'/list*',
    template: 'mainContent',
    layoutTemplate: 'list'
  });
});
}

答

我缺少的最大关键是Iron-router代替了文档的<body>.将我的模板移出HTML文档的<body>使其正常工作.这是更正的代码:

The biggest key I was missing is that iron-router replaces the <body> of your document. Moving my template out of the <body> of the HTML document makes it work. Here is the corrected code:

HTML:

<head>
  <title>carpool</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

</body>

<template name="mainContent">
  <div id="wrap">
    {{> page}}
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
      {{> header}}      
    </div>   
    <div class="row-fluid">
          <div class="span10">
        {{> yield}}
      </div>
      <div class="span2">
        {{#if currentUser}}
              {{> leaderboard}}
        {{/if}}
      </div>
    </div>
      </div>
    </div>
<div id="push"></div>
</div>

<div id="footer">
  <div class="container">
    {{> footer}}
  </div>
</div>
</template>

<template name="page">
  {{#if showAddEventDialogue}}
    {{> addEvent}}
  {{/if}}
  {{#if showConfigLoginService}}
    {{> configureLoginService}}
  {{/if}}
  {{#if showCalendarEventDetailsDialogue}}
    {{> calendarEventDetailsDialogue}}
  {{/if}}
</template>

JS:

/* Only execute if this is the client */
if (Meteor.isClient) {

  // Client subscriptions
  Meteor.subscribe('allCarpoolEvents');
  Meteor.subscribe('allCarpoolDebts');
  Meteor.subscribe('allUsers');


  Router.configure({
    autoRender: true
  });

  // Define Routes
  Router.map(function () {

    this.route('calendar', {
      path:'/',
      template: 'calendar',
      layoutTemplate: 'mainContent'
    });

    this.route('calendar', {
      path:'/calendar*',
      template: 'calendar',
      layoutTemplate: 'mainContent'
    });

    this.route('list', {
      path:'/list*',
      template: 'list',
      layoutTemplate: 'mainContent'
    });
  });
}

尝试从路由器迁移到Iron-Router

相关推荐