Meteor + Iron Router：在 pageRender 之后渲染答案

【问题标题】：Meteor + Iron Router: Render after pageRenderMeteor + Iron Router：在 pageRender 之后渲染
【发布时间】：2015-03-06 08:56:04
【问题描述】：

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

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

Iron Router 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 }} 后渲染层次结构被忽略？

真诚地，威利 (Doc) W.

【问题讨论】：

标签： javascript html meteor iron-router

【解决方案1】：

首先你的语法是完全错误的，你不应该显式地将引导程序添加到项目中，而是运行meteor add mizzao:bootstrap-3并从头中删除它们。

而不是页脚中的脚本标签创建footer.js并在其中制作

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

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

另外，你有主页模板吗？因为这就是您在 Iron-router 中调用的内容

【讨论】：

您好，感谢您的回复。首先，对于大多数人来说，我目前正在使用“meteor add bootstrap”，该软件包已损坏并创建了一些奇怪的输出，这就是我临时使用 CDN 的原因，但是在按照您的建议测试“mizzao:bootstrap-3”之后，bootstrap 现在正在工作在没有 CDN 的情况下正确。至于有仅用于内联测试的脚本标签，但我不明白为什么它不起作用，谢谢。
最后在包装 {{renderPage}} 时，我已经尝试使用多个 div、容器、跨度和部分来包装它，但我遇到的问题是容器是由于某种原因，在调用 {{renderPage}} 之前自动关闭。示例：{{> 导航 }}
{{ renderPage }}
{{>footer }} ;导致 .renderPage-wrapper 为空，并且页脚包装器仍然在 {{renderPage}} 之前被调用。是的，我确实有一个主页模板。
添加一些 css 到它，例如min-width:100px or sth
样式工作正常，只是在调用页面之前 div 仍处于关闭状态。
好的，那么您的 renderPage 看起来如何？如果是动态模板可以试试discovermeteor.com/blog/blaze-dynamic-template-includes

【解决方案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>

【讨论】：