javascript - div Meteor js中的渲染布局

我正在尝试实现这种方案，但还不知道如何解决。模板文件（DashboardLayout）具有3列，最左边是侧边栏，中间（MidLayout）是呈现内容的位置。在中间列中，必须有一个默认模板，即呈现的MidLayout模板，除非在侧栏上触发了功能。

一个示例是“创建博客”。如果我单击侧栏上的“创建博客”，则我希望表单在中间加载，而在创建博客后，表单应该消失，并且默认模板会重新出现

仪表板代码

<template name="DashboardLayout" >
    {{> HeaderLayout}}
<!-- Page Container -->
<div class="w3-container w3-content" style="max-width:1400px;margin-top:80px">
  <!-- The Grid -->
  <div class="w3-row">
    <!-- Left Column -->
    {{> ProfileLayout}}

    <!-- Middle Column -->
    {{> MidLayout}}

    <!-- Right Column -->
    {{> AdsLayout}}

  <!-- End Grid -->
  </div>

<!-- End Page Container -->
</div>
<br>

<!-- Footer -->
<footer class="w3-container w3-theme-d3 w3-padding-16">
  <h5>Footer</h5>
</footer>

<footer class="w3-container w3-theme-d5">
  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>

<script>
// Accordion
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className += " w3-theme-d1";
    } else {
        x.className = x.className.replace("w3-show", "");
        x.previousElementSibling.className =
        x.previousElementSibling.className.replace(" w3-theme-d1", "");
    }
}

// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

</template>

最佳答案

在流星中，我们有ReactiveVars和Session var用于处理反应性。看来您的“创建博客”按钮是
与您要决定要显示的数据的模板不同。

这是我对AdsLayout所做的简化版本（右侧）
和MidLayout（显示数据的中央区域随条件而变化）。

file:DashboardLayout.html

<template name="DashboardLayout">
{{#if isEditingBlog}}
    {{> EditBlogLayout}}
{{else}}
    {{> NormalLayout}}
{{/if}}
</template>



file: MidLayout.js

Template.MidLayout.helpers({
    isEditingBlog: function () {
        return Session.get('isEditingBlog');
    }
});



file: AdsLayout.html

<template name="AdsLayout">
<!-- code up here -->
<button id="editBLog"> Edit Blog </button>
<!-- code down here -->



file: AdsLayout.js

Template.AdsLayout.onCreated(function (){
    Session.set('isEditingBlog', false);
});


Template.AdsLayout.events({
    'click #editBlog': function () {
        Session.set('isEditingBlog', true);
    }
});



file: EditBlogLayout.html

<template name="EditBlogLayout">
<!-- code up here -->
<button id="SubmitBlogEdit"> Submit Blog Post </button>
<!-- code down here -->



EditBlogLayout.js

Template.MidLayout.events({
    'click #editBlog': function () {
        Session.set('isEditingBlog', false);
    }
});

因此，在此示例中，我们看到在模板中设置了会话变量，可以在其中修改“编辑”状态。和决定
有关显示内容的信息基于模板中内容是动态的变量。现在，如果此中间列区域需要
要根据用户单击的按钮或用户正在访问的页面进行大量更改，则可以使用多种方法来进行创建。
例如，您可能想使用路由器，但使用始终带有左右列的基本模板（Meteor: Using If condition to conditionally display templates when user clicks a navigation link，也请查看FlowRouter）进行渲染，或者可以使用动态模板（https://themeteorchef.com/tutorials/using-dynamic-templates）。