BlazeLayout将内容呈现为动态模板，但内容出现在文档的底部
我试图通过FlowRouter和BlazeLayout.render()将模板呈现给动态模板。这个动态模板存在于引导容器div中。但是，当呈现内容时，它以div id d的形式附加到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>以及页面和动态模板，命名为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>有人能解释一下为什么我的呈现模板没有出现在呈现模板应该出现的地方吗？提前谢谢你！
我现在的流星包裹清单：
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.回答 1
Stack Overflow用户
发布于 2015-12-15 22:22:43
好吧。所以这就是我不理解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路由呈现多个动态模板。
https://stackoverflow.com/questions/34299849
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号