Question

我正在尝试从路由器迁移到铁路由器但是我的整个页面无法正确渲染时出现问题。渲染的唯一模板是从＆＃34;＆gt;生成的模板。产率＆＃34 ;.我的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'
  });
});
}

Answer 1

我遗漏的最大关键是铁路由器取代了文件的<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'
    });
  });
}

尝试从路由器迁移到铁路由器

1 个答案: