0

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

我的路线：

 /*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"文本出现在页面的左下角，不受 bootstrap 约束"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.
4

1 回答 1

0

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

索引.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 路由渲染多个动态模板。

于 2015-12-15T22:22:43.317 回答