Question

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

我的路线：

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

Answer 1

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

的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路径渲染多个动态模板。

BlazeLayout将内容呈现为动态模板，但内容出现在文档的底部

1 个答案: