BlazeLayout 将内容呈现到动态模板，但内容出现在文档底部答案

【问题标题】：BlazeLayout rendering content to a dynamic template, but the content is appearing at the bottom of the documentBlazeLayout 将内容呈现到动态模板，但内容出现在文档底部
【发布时间】：2016-03-21 20:53:58
【问题描述】：

我正在尝试通过 FlowRouter 和 BlazeLayout.render() 将模板呈现为动态模板。该动态模板存在于 Bootstrap 容器 div 中。然而，当内容被渲染时，它被附加到 DOM 底部的一个 id 为“__blaze-root”的 div 中，在我的 Bootstrap 容器之外，因此破坏了我的页面布局。

我的路线：

 /*Public Routes*/
    FlowRouter.route( '/', {
        action: function() {
            BlazeLayout.render("mainLayout", {area: "main"})
        },
        name: "public"
    });

要渲染的模板：

<template name="mainLayout">
    TEST CONTENT TO BE RENDERED
</template>

还有页面和动态模板，命名为 main，应该在哪里渲染：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Arena v.01</title>
</head>

<body id="mainPageBackground">
    <div class="container">
        {{> Navbar}}
        <div class="row">
            <div class="col-md-4">
            {{> Template.dynamic template=main}}
            </div>
        </div>
        <div class="row">
            TEST #2
        </div>
    </div>
</body>

然而，我看到的是 "TEST CONTENT TO BE RENDERED" 文本出现在页面的左下方，不受引导程序 "col-md-4" 的约束。下面提供的后渲染源作为示例。

...
  <div class="row">
    <div class="col-md-4">
             <---- This empty column div is where I would expect the content to render.
    </div>
  </div>
  <div class="row">
     TEST #2
  </div> 
</div> <--- This is the end of the <div class="container">
<div id="__blaze-root">TEST CONTENT TO BE RENDERED</div>
</body>
</html>

有人能解释一下为什么我的渲染模板没有出现在渲染模板应该出现的地方吗？提前谢谢！

我目前的 Meteor 包列表：

accounts-password            1.1.4  Password support for accounts
aldeed:autoform              5.8.0* Easily create forms with automatic insert and update, and automatic reactive validation.
aldeed:collection2           2.6.0* Automatic validation of insert and update operations on the client and server.
aldeed:simple-schema         1.5.0  A simple schema validation object with reactivity. Used by collection2 and autoform.
blaze-html-templates         1.0.1  Compile HTML templates into reactive UI with Meteor Blaze
ecmascript                   0.1.6  Compiler plugin that supports ES2015+ in all .js files
es5-shim                     4.1.14  Shims and polyfills to improve ECMAScript 5 support
ian:accounts-ui-bootstrap-3  1.2.84  Bootstrap-styled accounts-ui with multi-language support.
jquery                       1.11.4  Manipulate the DOM using CSS selectors
kadira:blaze-layout          2.3.0  Layout Manager for Blaze (works well with FlowRouter)
kadira:flow-router           2.10.0  Carefully Designed Client Side Router for Meteor
meteor-base                  1.0.1  Packages that every Meteor app needs
meteortoys:allthings         2.3.1  Insanely Handy Development Tools
mobile-experience            1.0.1  Packages for a great mobile user experience
mongo                        1.1.3  Adaptor for using MongoDB and Minimongo over DDP
session                      1.1.1  Session variable
standard-minifiers           1.0.2  Standard minifiers used with Meteor apps by default.
tracker                      1.0.9  Dependency tracker to allow reactive callbacks
twbs:bootstrap               3.3.6  The most popular front-end framework for developing responsive, mobile first projects on the web.

【问题讨论】：

我找到了 a 解决方案，但在我输入它是否是公认的解决方案之前，我很犹豫是否将问题标记为自行解决。在 client/index.js 我有：BlazeLayout.setRoot('#test'); 我对包含我的动态模板的 div 进行了以下更改。 <div class="col-md-4" id="test"> {{> Template.dynamic template=main}} </div> 那么这是通过手动更改 BlazeLayout 根来使其工作的唯一方法吗？如果我有两个动态模板并且我想在每个模板中呈现不同的内容怎么办？

标签： twitter-bootstrap meteor meteor-blaze flow-router

【解决方案1】：

好的。所以这是我不明白 BlazeLayout 是如何工作的。我的解决方案是将 BlazeLayout 根设置为包含主布局的主 div，然后在该布局模板中组织我的动态模板。通过将 BlazeLayout 根设置为包含单个动态模板的 div，这解决了我在 DOM 底部呈现内容的问题以及仅限于单个动态模板。

index.html

<body id="mainPageBackground">
    <div class="container">
        {{> Navbar}}
        <div class="row">
            <div class="col-md-4" id="test">
                {{> mainLayout }}
            </div>
        </div>
    </div>
</body>

index.js

BlazeLayout.setRoot('#test');

mainLayout.html

<template name="mainLayout">
    {{> Template.dynamic template=test}}
        <br>
    {{> Template.dynamic template=main}}
</template>

<template name="content">
    CONTENT HERE!
</template>

<template name="test">
    TEST HERE!
</template>

此时我的内容被渲染到页面的正确区域，我可以从一个或多个 FlowRouter 路由渲染多个动态模板。

【讨论】：