Meteor {{yield}} 没有使用 Boostrap 在正确的位置渲染

我的页面{{yield}}部分没有按照我的引导程序布局正确呈现。它的行为就好像它只是附加到身体而不是插入正确的位置。

这是我模板的相关部分：

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <nav class="navbar navbar-default" role="navigation">
                    ...
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-9">
                {{yield}}
            </div>
            <div class="col-xs-3">
                <ul class="nav nav-pills nav-stacked">
                    {{> sideNav}}
                </ul>
            </div>
        </div>
    </div>
</body>
<template name="home">
    <p>Home Ya'll.</p>
</template>

一切正常，home模板正在渲染，但它基本上是这样呈现的：

<body>
    <div class="container-fluid">...</div>
    <p>Home ya'll.</p> <!-- This should be inside the div -->
</body>

home模板部分在div之后而不是内部。这是怎么回事？

如果这很重要，我将引导程序包含在这个不太启用的软件包中。

正如官方文档开头所述 https://github.com/EventedMind/iron-router#concepts

铁路由器接管生成页面的<body>。您不需要像定义 HTML 页面那样定义 <body> 元素;相反，您可以定义一个"layout"（通常是 <template name="layout">...</template> ），其中包含不会在应用页面之间更改的静态元素，以及一个或多个 {{yield}} 标记（技术上是模板帮助程序），这些标记将从其他模板引入内容。在布局文件中，没有任何参数的 {{yield}} 标记称为 "main yield" ，它将拉入由 route() 方法调用的模板选项指定的路由模板。

据此，与其将正文作为您的主模板，不如将其包装在布局模板中

<template name="layout">
  {{yield}}
</template>

并将模板名称声明为路由配置中的主布局。

Router.configure({
  layoutTemplate: 'layout'
});

相关内容

最新更新

热门标签：