Javascript 在div Meteor js中呈现布局

我有这样一个场景，我正试图实现，但还不知道如何去做。模板文件（DashboardLayout）有3列，最左边是侧栏，中间（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>

{{>头部布局}
{{>ProfileLayout}
{{>MidLayout}
{{>AdsLayout}


页脚
动力

//手风琴
函数myFunction（id）{
var x=document.getElementById（id）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
x、 previousElementSibling.className+=“w3-theme-d1”；
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
x、 previousElementSibling.className=
x、 previousElementSibling.className.replace（“w3-theme-d1”，”）；
}
}
//用于在单击菜单按钮时在较小屏幕上切换菜单
函数openNav（）{
var x=document.getElementById（“navDemo”）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
}
}

---

在meteor中，我们有反应变量和会话变量来处理反应性。看起来你的“创建博客”按钮是 在不同的模板中，选择要在其中决定要显示的数据的模板

下面是我所看到的一个简化版本，说明了您需要如何使用AdsLayout（右侧边栏） 和MidLayout（中心区域，其中显示的数据随条件而变化）

文件：DashboardLayout.html
{{{#如果是编辑博客}
{{>EditBlogLayout}
{{else}
{{>NormalLayout}
{{/if}
文件：MidLayout.js
Template.MidLayout.helpers({
isEditingBlog:函数（）{
return Session.get（'isEditingBlog'）；
}
});
文件：AdsLayout.html
编辑博客
文件：AdsLayout.js
Template.AdsLayout.onCreated（函数（）{
Session.set（'isEditingBlog'，false）；
});
Template.AdsLayout.events({
“单击#编辑博客”：函数（）{
set（'isEditingBlog'，true）；
}
});
文件：EditBlogLayout.html
提交博客文章
EditBlogLayout.js
Template.middlayout.events({
“单击#编辑博客”：函数（）{
Session.set（'isEditingBlog'，false）；
}
});

因此，在本例中，我们看到会话变量是在模板中设置的，在模板中可以修改“编辑”状态。决定呢 要显示的内容基于模板中内容为动态的变量。现在，如果这个中间柱区域需要 要根据用户单击的按钮或他们所在的页面进行大量更改，您可以通过大量方法来创建这些按钮。

---

例如，您可能希望使用路由器，但渲染时使用始终具有左右列的基本模板（，也请查看FlowRouter），或者您可以使用动态模板（）。

在meteor中，我们有反应变量和会话变量来处理反应性。看起来你的“创建博客”按钮是 在不同的模板中，选择要在其中决定要显示的数据的模板

下面是我所看到的一个简化版本，说明了您需要如何使用AdsLayout（右侧边栏） 和MidLayout（中心区域，其中显示的数据随条件而变化）

文件：DashboardLayout.html
{{{#如果是编辑博客}
{{>EditBlogLayout}
{{else}
{{>NormalLayout}
{{/if}
文件：MidLayout.js
Template.MidLayout.helpers({
isEditingBlog:函数（）{
return Session.get（'isEditingBlog'）；
}
});
文件：AdsLayout.html
编辑博客
文件：AdsLayout.js
Template.AdsLayout.onCreated（函数（）{
Session.set（'isEditingBlog'，false）；
});
Template.AdsLayout.events({
“单击#编辑博客”：函数（）{
set（'isEditingBlog'，true）；
}
});
文件：EditBlogLayout.html
提交博客文章
EditBlogLayout.js
Template.middlayout.events({
“单击#编辑博客”：函数（）{
Session.set（'isEditingBlog'，false）；
}
});

因此，在本例中，我们看到会话变量是在模板中设置的，在模板中可以修改“编辑”状态。决定呢 要显示的内容基于模板中内容为动态的变量。现在，如果这个中间柱区域需要 要根据用户单击的按钮或他们所在的页面进行大量更改，您可以通过大量方法来创建这些按钮。

---

例如，您可能希望使用路由器，但使用始终具有左右列的基本模板进行渲染（，也可以查看FlowRouter），或者您可以使用动态模板（）。

我开发了一个和一个用于使用Meteor+DDP+Blaze开发高级UI的模板。从应用程序的外观来看，它属于这一类。一个小小的结构可以帮助你保持理智。我建议您看看是否可以从这项工作中得出任何结论。

我已经开发了一个和一个用于使用Meteor+DDP+Blaze开发高级UI的工具。从应用程序的外观来看，它属于这一类。一个小小的结构可以帮助你保持理智。我建议您查看一下，看看是否可以从这项工作中得出任何结论。

虽然您链接到的网站可能会提供此问题的答案，但希望您能将答案的主要部分直接包含在此处，这样即使您的外部内容发生更改或下降，也能对读者有用。感谢您提供的信息。今后我肯定会更加注意这一点。我的意图是让“提问者朝着正确的方向前进”，在我看来，这是一个很好的选择

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);
    }
});