流星+铁路由器：在pageRender之后渲染

Question

我最近一直在玩Meteor，我很喜欢它，但是进入项目5分钟后，我在调用{{pageRender}}后渲染模板时遇到了问题（请注意，{{> renderPage}}特别是仅渲染Iron路由器被告知要渲染，并且忽略任何其他呼叫。）

下面的当前代码可以正常运行，因为它仍然是基本配置，但是页脚模板在动态页面呈现之前被称为“之前”，这导致页脚出现在所有页面内容之上。 我也尝试将页脚文本移到main.html中，但是页脚仍在{{renderPage}}内容之前呈现。

铁路由器Js：

Router.route('/', function () {
  this.render('Home', {
    //data: function () { return Items.findOne({_id: this.params._id}); }
  });
});

HTML来源：

<head>
  <title>NDA Site</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>

<body>
    <!-- Render Navigation -->
    {{> navigation }}

    <!-- Render Page (Anything gets closed before render is called canceling grid out. Grid has been moved to each template for accuracy)-->
    <div class="renderPage-wrapper">{{ renderPage }}</div>

    <!--{{> footer }} 
    footer will not render after renderPage. Footer has been added to main.html as show below-->


        <div class="container"><div class="row">

            <div class="col-lg-6">
                <p>YourSite &copy; {{year}}. All rights reserved.</p>
            </div>

            <div class="col-lg-6 text-right">
                <p>Powered by: NDA Site 0.1.2</p>
            </div>

            </div></div>

</body>

模板来源：

<template name="footer">


        <div class="container"><div class="row">

            <div class="col-lg-6">
                <p>YourSite &copy; {{year}}. All rights reserved.</p>
            </div>

            <div class="col-lg-6 text-right">
                <p>Powered by: NDA Site 0.1.2</p>
            </div>

            </div></div>
</template>

有什么解决办法吗？ 或解释为什么客户端运行{{renderPage}}后会忽略渲染层次结构？

真诚的，威利（医生）W.

Answer 1

首先，您的语法是完全错误的，不应将bootstrap显式添加到项目中，而应运行meteor add mizzao:bootstrap-3并将其从头删除。

代替在footer中创建脚本标签，创建footer.js并在其中创建

if(Meteor.isClient){
    Template.footer.helpers({
       year: function(){
          return new Date().getFullYear();
       }
}

并且，如果您希望所有内容都在彼此之下，请将{{renderPage}}包装到某个div中，该位置将一直保留到该位置，直到加载模板为止。

另外，您有主页模板吗？ 因为这就是您在Iron-Router中所说的

Answer 2

好的，我想出了一个解决方案，同时又是我使用Iron：router错误（缺少步骤）。

首先，需要定义布局模板。

<template name="layout">

  <div id="main-wrapper">

    {{>navigation }}


    <div class="container-fluid content">
        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 pull-right">
                {{>yield}}
            </div>

            <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 pull-left">
                {{>sidebar}}
            </div>

    </div>
</div>

    <!--{{>footer }} // Normally you would render your footer here at the bottom of the page. Since the project i am working on consist of a static sidebar i moved the {{>footer}} to {{>sidebar}} -->

  </div><!-- Particle JS -->


  <!--<script type="text/javascript" src="js/particles.js"></script>
  <script src="http://vincentgarreau.com/particles.js"></script>
  <script type="text/javascript" src="/js/app.js"></script>-->

</template>

然后需要设置布局配置。

// Configure Iron:Router
Router.configure({
  loadingTemplate: 'loading',
  notFoundTemplate: 'notFound',
  layoutTemplate: 'layout'
});

具有头部和身体的main.html或yourProject.html应该看起来像这样。

<head>
  <title>Foobar</title>
    <link rel="icon" href="http://www.aperturestudiosmedia.com/favicon.ico">

</head>

<body>
    <!-- Render Krater -->
</body>

流星+铁路由器：在pageRender之后渲染

问题描述

2 个解决方案

解决方案1
0 2015-01-08 09:42:32

解决方案2
0 2015-01-17 17:18:27

流星+铁路由器：在pageRender之后渲染

问题描述

2 个解决方案

解决方案1 0 2015-01-08 09:42:32

解决方案2 0 2015-01-17 17:18:27

解决方案1
0 2015-01-08 09:42:32

解决方案2
0 2015-01-17 17:18:27