流星 + 铁路由器:在页面渲染后渲染

Meteor + Iron Router: Render after pageRender

本文关键字：路由器 流星      更新时间：2023-09-26

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

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

铁路由器 js： 

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

网页来源：

<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.

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

而不是页脚

中的脚本标签创建页脚.js并在其中使

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

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

另外，你有主页模板吗？因为这就是你在铁路由器中所说的

好的，我想出了一个解决方案，同时我错误地使用了 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'
});

主要的.html或你的项目.html有你的头和身体应该看起来像这样。

<head>
  <title>Foobar</title>
    <link rel="icon" href="http://www.aperturestudiosmedia.com/favicon.ico">
</head>
<body>
    <!-- Render Krater -->
</body>
相关文章：