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

【问题标题】：Trying to Migrate to Iron-Router from Router尝试从路由器迁移到 Iron-Router
【发布时间】：2014-04-17 02:02:18
【问题描述】：

我正在尝试从路由器迁移到 Iron-router，但我的整个页面无法正确呈现的问题。唯一正在渲染的模板是从“>产量”生成的。我的 HTML 文件中的任何其他代码都不会呈现。

我希望页面上的所有内容都保持静态。但我希望 yield 中的模板根据 url 进行更改。我在配置中缺少什么使其行为如此？

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

【解决方案1】：

我缺少的最大关键是 iron-router 替换了您文档的 <body>。将我的模板移出 HTML 文档的<body> 使其工作。这是更正后的代码：

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'
    });
  });
}

【讨论】：