Javascript 流星+；铁路由器：在页面渲染后渲染_Javascript_Html_Meteor_Iron Router

Javascript 流星+；铁路由器：在页面渲染后渲染

javascript html meteor

Javascript 流星+；铁路由器：在页面渲染后渲染,javascript,html,meteor,iron-router,Javascript,Html,Meteor,Iron Router,我最近一直在玩Meteor，我很喜欢它，但是在一个项目开始5分钟后，我在调用{{pageRender}}后在渲染模板方面遇到了问题（特别注意，{{>renderPage}}只渲染Iron Router要求渲染的内容，而忽略任何其他调用）下面的当前代码工作得非常好，因为它仍然是基本配置，但是页脚模板在呈现动态页面之前被调用，这导致页脚显示在所有页面内容之上。我还尝试将页脚文本移动到main.html中，但是页脚仍然呈现在{{renderPage}}内容之前铁路由器Js: Router.rout

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

下面的当前代码工作得非常好，因为它仍然是基本配置，但是页脚模板在呈现动态页面之前被调用，这导致页脚显示在所有页面内容之上。我还尝试将页脚文本移动到main.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>

HTML源代码：

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}
YourSite©；{{年}。版权所有
动力来源：NDA站点0.1.2

模板来源：

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>


YourSite©；{{年}。版权所有
动力来源：NDA站点0.1.2

有没有关于工作的想法？或者解释为什么在客户端运行{{renderPage}后忽略渲染层次结构

真诚地，

Willie（Doc）W.

首先，您的语法是完全错误的，您不应该显式地将引导添加到项目中，而是运行

meteor add mizzao:bootstrap-3

并从head中删除它们

创建footer.js并在其中生成

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

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

还有，你有主页模板吗？因为这就是你在iron router中所说的

好吧，我想出了一个解决方案，同时我使用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>

main.html或yourProject.html的头部和身体应该是这样的

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

</head>

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


福巴

您好，谢谢您的回复。首先也是最重要的一点，我目前正在使用“meteor add bootstrap”，该软件包已损坏，并创建了一些奇怪的输出，这就是我临时使用CDN的原因，但在测试了“mizzao:bootstrap-3”之后，正如您所建议的，bootstrap现在可以在没有CDN的情况下正常工作。至于脚本标记只是用于内联测试，但不是，我可以理解为什么它不起作用，谢谢。最后，当涉及到包装{renderPage}时，我已经尝试过用多个div、容器、跨距和节来包装它，但我遇到的问题是，容器在测试之前会自动关闭{由于某些原因可以调用{renderPage}。例如：{{>navigation}{{renderPage}}{{>footer}}；导致.renderPage包装为空，并且在{{renderPage}之前仍会调用页脚包装。是的，我有一个主模板。添加一些css到其中，例如，min width:100px或sthStyling工作正常，只是在调用页面之前div仍处于关闭状态。好的，那么您的渲染页面看起来如何？如果它是动态模板，请尝试