Question

我有这种情况我试图实现，但还不知道如何去实现它。模板文件（DashboardLayout）有3列，最左边是侧边栏，中间（MidLayout）是内容呈现的位置。在中间列中必须有一个默认模板，即除非在侧边栏上触发函数，否则呈现MidLayout模板。

一个例子是＆＃34;创建博客＆＃34;。如果我点击＆＃34;创建博客＆＃34;在侧栏上我希望表单在中间加载，而在创建博客后，表单应该消失，默认模板重新出现

仪表板代码

<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 vars来处理反应。看来你的＆＃34;创建博客＆＃34;按钮是在与您决定要显示的数据的模板不同的模板中。

以下是我对您的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);
    }
});

所以，在这个例子中，我们看到会话变量是在＆＃34;编辑＆＃34;的模板中设置的。国家可以修改。而决定关于要显示什么是基于模板中的内容是动态的变量。现在，如果这个中间列区域需要要根据用户点击的按钮或他们所依赖的页面进行更改，那么有很多方法可以创建它。例如，您可能想要使用路由器但使用基本模板进行渲染，该模板始终具有右列和左列（Meteor: Using If condition to conditionally display templates when user clicks a navigation link，也可以检出FlowRouter），或者您可以使用动态模板（{{ 3}}）。

Answer 2

我开发了reference architecture和demo app用于开发Meteor + DDP + Blaze的高级用户界面。从您的应用程序的外观来看，它属于这一类。一个小结构可以大大有助于挽救你的理智。我建议你去看看你是否可以从这项工作中汲取任何东西。

渲染div Meteor js中的布局

2 个答案: