javascript - 在 div Meteor js 中渲染布局

Question

我有这个场景，我正在努力实现，但还不知道如何去做。一个模板文件(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>

Answer 1

在 meteor 中，我们有 ReactiveVars 和 Session 变量来处理 react 性。您的“创建博客”按钮似乎是在与您决定要显示的数据的模板不同的模板中。

这是我认为您需要对 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);
    }
});

因此，在此示例中，我们看到 session 变量设置在模板中，其中可以修改“编辑”状态。而决定关于要显示的内容取决于模板中的内容是动态的变量。现在，如果这个中间栏区域需要要根据用户单击的按钮或他们所在的页面进行大量更改，那么您可以使用大量方法来创建它。例如，您可能想使用路由器，但使用始终具有右列和左列的基本模板进行渲染(Meteor: Using If condition to conditionally display templates when user clicks a navigation link，也可以查看 FlowRouter)，或者您可以使用动态模板(https://themeteorchef.com/tutorials/using-dynamic-templates)。