CODEWITHSUNDEEP
javascripthtmlcssmeteormeteor-blaze
ken4ward
ken4ward

Reputation: 2296

Rendering layouts in div Meteor js

I have this scenario I'm trying to achieve but not yet knowing how to go about it. A template file (DashboardLayout) has 3 columns, the leftmost is the sidebar, the middle (MidLayout) is the where contents are rendered. In the middle column there has to be a default template which is the MidLayout template rendered unless a function is triggered on the sidebar.

An example is "Create Blog". If I click "Create Blog" on the sidebar I want the form to load in the middle while and after creating the blog the form should disappear and the default template re-appear

code for dashboard

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

enter image description here

Upvotes: 0

Views: 198

Answers (2)

user105375
user105375

Reputation:

I've developed a reference architecture and a demo app for developing advanced UIs with Meteor+DDP+Blaze. From the look of your app, it falls into this category. A little structure can go a long way toward saving your sanity. I'd recommend taking a look to see if you can draw anything from this work .

Upvotes: 1

gpwclark
gpwclark

Reputation: 66

In meteor we have ReactiveVars and Session vars for dealing with reactivity. It seems that your "Create Blog" button is in a different template than the the template in which you are making a decision about the data to display.

Here is what I see as a simplified version of what you need to do with your AdsLayout (right sidebar) and MidLayout (central area where data displayed changes on a condition).

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

So, in this example, we see the session variable is set in the templates where the "editing" state can be modified. And the decision about what to display is based on that variable in the template whose content is dynamic. Now, if this mniddle column area needs to change a lot based on what buttons a user is clicking or what page they're on, then there are an enormous amount of ways you could go about creating that. For instance, you'd probably want to use a router but render with a base template that always had the right and left columns (Meteor: Using If condition to conditionally display templates when user clicks a navigation link, also check out FlowRouter), or you could use dynamic templates (https://themeteorchef.com/tutorials/using-dynamic-templates).

Upvotes: 1

Related Questions