2014-04-04 139 views
0

我想从路由器迁移到铁路由器,但有一个问题,我的整个页面无法正确呈现。唯一的渲染模板是从“> 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' 
    }); 
}); 
} 

回答

0

我错过的最大关键是铁路由器替换文档的<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' 
    }); 
    }); 
}