Question

我已经尝试了六种不同的方法来做到这一点，但我不确定问题是什么。

首先，这里是我想要完成的快速绘图：

似乎正在发生的事情是我的.row .full-row被渲染了两次，并且动态模板没有按照定义加载到我的<div class="col-md-10>中。为什么会这样？

继承我目前的代码：

<body>
    <div class="container full-container">
        {{> navbar}}
        {{> middle}}
    </div>
</body>

<template name="navbar">
    ...
</template>

<template name="middle">
        <div class="row full-row">
            <div class="col-md-2 left-bar" style="background:#800000;">
                {{> Template.dynamic template=sidebar}}
            </div>
            <div class="col-md-10">
                {{> Template.dynamic template=content}}
            </div>
        </div>
    <!-- </div> -->
</template>

<template name="leftbar">
        <div class="row">
            <div class="col-md-12">
                {{> avatar size="large" shape="circle"}}
            </div>
        </div>
</template>

<template name="usercard">
    <div class="col-md-4">
        <div class="thumbnail thumb-dark">
        <img src="default.png" alt="...">
            <div class="caption">
                <h3>Player name</h3>
                <p>...</p>
                <a href="#" class="btn btn-success" role="button">Join</a>
            </div>
        </div>
    </div>
</template>

<template name="home">
    <div class="row">
        {{#each playerslooking}}
            {{> usercard}}
        {{/each}}
    </div>
</template>

<template name="find_page">
    <div style="height:150px;width:150px;background:blue;">hello</div>
</template>

JS：

FlowRouter.route('/', {
  action: function() {
    BlazeLayout.render("middle", {sidebar: 'leftbar', content: "home"});
  }
});

FlowRouter.route('/find/:_id', {
  name: 'postfind.show',
  action: function() {
    BlazeLayout.render('middle', {sidebar: 'leftbar', content: "find_page"});
  }
});

我已经多次重构我的代码尝试调试它，因为我不确定BlazeLayout是如何使用嵌套模板的。

感谢所有投入，谢谢。

Answer 1

为了以防万一，您是否尝试过Blaze Layout根修改？

请参阅：https://github.com/kadirahq/blaze-layout#set-different-root-node

BlazeLayout + FlowRouter + Bootstrap无法渲染到哪里

1 个答案: