Попытка перейти на Iron-Router с роутера

Я пытаюсь перейти с маршрутизатора на железный маршрутизатор, но у меня возникла проблема с некорректным отображением всей моей страницы. Единственный шаблон, который рендерится, это то, что создается из "> yield". Любой другой код в моем 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
person shinank    schedule 04.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Самый большой ключ, который я упустил, это то, что iron-router заменяет <body> вашего документа. Перемещение моего шаблона из <body> HTML-документа заставляет его работать. Вот исправленный код:

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'
    });
  });
}
person shinank    schedule 16.04.2014