Twitter bootstrap BlazeLayout将内容呈现为动态模板，但内容显示在文档底部_Twitter Bootstrap_Meteor_Meteor Blaze_Flow Router

Twitter bootstrap BlazeLayout将内容呈现为动态模板，但内容显示在文档底部

twitter-bootstrap meteor

Twitter bootstrap BlazeLayout将内容呈现为动态模板，但内容显示在文档底部,twitter-bootstrap,meteor,meteor-blaze,flow-router,Twitter Bootstrap,Meteor,Meteor Blaze,Flow Router,我试图通过FlowRouter和BlazeLayout.render（）将模板渲染为动态模板。该动态模板存在于引导容器div中。但是，当呈现内容时，它会附加到div id中DOM的底部，名为“_blaze-root”，位于我的引导容器之外，因此会破坏我的页面布局我的路线： /*Public Routes*/ FlowRouter.route( '/', { action: function() { BlazeLayout.render("mai

我试图通过FlowRouter和BlazeLayout.render（）将模板渲染为动态模板。该动态模板存在于引导容器div中。但是，当呈现内容时，它会附加到div id中DOM的底部，名为“_blaze-root”，位于我的引导容器之外，因此会破坏我的页面布局

我的路线：

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

要呈现的模板：

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

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

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

我当前的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.

好的。所以这是我不理解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>

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>


{{>Template.dynamic Template=test}


{{>Template.dynamic Template=main}
内容在这里！
在这里测试！

此时，我的内容被呈现到页面的正确区域，我可以呈现来自一个或多个FlowRouter路由的多个动态模板

我已经找到了一个解决方案，尽管在我对这个问题是否是可接受的解决方案有所投入之前，我犹豫是否将其标记为自我解决的问题。在client/index.js中，我有：

BlazeLayout.setRoot（“#test”），我对包含动态模板的div做了如下更改<代码>{{>Template.dynamic Template=main}

那么这是通过手动更改BlazeLayout根目录使其工作的唯一方法吗？如果我有两个动态模板，并且我想在每个模板中呈现不同的内容，该怎么办？

BlazeLayout.setRoot('#test');

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