在div中渲染布局流星js

我有这种情况我试图实现，但还不知道如何去做。模板文件（DashboardLayout）有3列，最左边是侧边栏，中间（MidLayout）是内容呈现的位置。在中间列中必须有一个默认模板，即MidLayout模板，除非在侧边栏上触发了一个函数。一个例子是“创建博客”。如果我点击“创建博客”上我想要的形式在中等负荷侧栏，而和创建博客的形式应该会消失，默认模板后重新出现在div中渲染布局流星js

代码仪表板

<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>

提前致谢。期待您在解决这些问题方面拥有出色的专业知识。

来源

2017-05-16 kehinde

在流星中，我们有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）。

来源

2017-05-16 18:08:34 gpwclark

我开发了一个reference architecture和demo app用于开发先进的用户界面流星+ DDP +火焰。从你的应用程序的外观来看，它属于这个类别。一个小结构可以大大减少你的理智。我建议看一下，看看你是否能从这项工作中得出任何东西。

来源

2017-05-16 19:06:11

虽然您链接到的网站可能会提供此问题的答案，但您希望直接在此处包含答案的主要部分，以便即使在您的外部内容发生变化的情况下，它仍然对读者有用下跌降落。 – ghybs

感谢您的信息。我将来肯定会更加关注这一点。我的意图是让“提问者走向正确的方向”，因为我认为任何简单的答案都会失败。 –

在div中渲染布局流星js

回答

相关问题