在div中渲染布局流星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

在流星中，我們有ReactiveVars和Session vars來處理反應性。看起來您的「創建博客」按鈕是 ，與您要對其中顯示的數據作出決定的模板不同。

下面是我所看到的您需要使用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); 
    } 
}); 

因此，在本例中，我們看到會話變量設置在可以修改「編輯」狀態的模板中。關於顯示內容的決定 基於模板中的內容是動態變量。現在，如果此mniddle列區域需要 根據用戶點擊的按鈕或他們所在的頁面進行更改，那麼您可以通過大量的方式創建該列。例如，您可能想使用路由器，但使用始終具有右列和左列的基本模板（Meteor: Using If condition to conditionally display templates when user clicks a navigation link，也檢出FlowRouter）進行渲染，或者可以使用動態模板（https://themeteorchef.com/tutorials/using-dynamic-templates）。

Answer 2

我開發了一個reference architecture和demo app用於開發先進的用戶界面流星+ DDP +火焰。從你的應用程序的外觀來看，它屬於這個類別。一個小結構可以大大減少你的理智。我建議看一下，看看你是否能從這項工作中得出任何東西。