CODEWITHSUNDEEP
meteormeteorite
You Hock Tan
You Hock Tan

Reputation: 1015

how to dynamically render template content

I'm current doing a meteorjs site. However, I have a problem of rendering the content of the site correct.(Because I have a fixed sidebar).

//layout.html

<head>
  <title>App</title>
</head>

<body>
    //render helper
    {{renderPage layout}}
</body>

//route.js

  Meteor.Router.add({
    '/': 'index',
    '/admin': 'admin',
    '/search': 'search',
    '/contact': 'contact',
    '/login':'login',
    '/logout':'logout',
    '/registration': 'registration',
    '/admin/listUser': 'listUser',
    '/admin/addUser': 'addUser',
    '/admin/editUser': 'editUser',
    '/admin/delUser': 'delUser',
    '/admin/listPost': 'listPost',
    '/admin/addPost': 'addPost',
    '/admin/editPost': 'editPost',
    '/admin/delPost': 'delPost',
    '/admin/viewPost': 'viewPost',
    '/admin/modPost': 'modPost',
    '/admin/listLoc': 'listLoc',
    '/admin/addLoc': 'addLoc',
    '/admin/delLoc': 'delLoc',
  })

  // to determin which page to render
  Template.body.helpers({
    layout: function() {
      switch (Meteor.Router.page()) {
        case 'index':
          return 'index';
        case 'admin':
          return 'admin';
        case 'login':
          return 'login';
        case 'logout':
          return 'logout';
        case 'registration':
          return 'registration';
        case 'search':
          return 'search';
        case 'contact':
          return 'contact';
        default:
          return 'index';
      }
    }
  });

admin.html

//sidebar
<template name="adminSide">
<ul class="nav nav-list">
    <li class="nav-header">User Management</li>
    <li><a href="/admin/listUser" id="linkValue">List Users</a></li>

    <li class="nav-header">Posting Management</li>
    <li><a href="/admin/listPost">List Posting</a></li>
    <li><a href="/admin/addPost">Add New Posting</a></li>
    <li><a href="/admin/modPost">Moderate Posting</a></li>

    <li class="nav-header">Location Management</li>
    <li><a href="/admin/listLoc">List Locations</a></li>
    <li><a href="/admin/addLoc">Add New Locations</a></li>

    <li class="divider"></li>
    <li><a href="/logout">Log Out</a></li>
    </ul>
</template>

//landing page
<template name="adminLand">
    <div class="page-header">
        <h1>Welcome to the Admin Panel!</h1>
    </div>
        <p class="lead">To begin, click on any link on the left.</p>
</template>

//page to render if click on sidebar
<template name="listUser">
</template>

<template name="admin">
  {{> navigationAdm}}
<div class="container">
<div class="row">
    <div class="span3">
       {{>adminSide}}
    </div>
    <div class="span9">
       //how do I make this render another template when the sidebar is clicked?
       {{renderPage}}
    </div>
    </div>
    <hr>
    {{>footer}}
</div>
</template>

I'm using Router from Meteorite. Thanks in advance!

Upvotes: 3

Views: 860

Answers (1)

Tarang
Tarang

Reputation: 75975

To use the router from meteorite you need to make a file with your routes:

client/router.js

Meteor.Router.add({
    '/admin': 'adminLand',
    '/admin/listUser':'listUser',
    '/admin/listPost':'listPost',
    '/admin/addPost':'addPost',
    '/admin/modPost':'modPost'
    '*': 'not_found'
});

Then you need to create a region in your page where you want the content to come to with {{renderPage}}

<div class="span9">
   //how do I make this render another template when the sidebar is clicked?
   {{renderPage}}
</div>

Then just create templates for each 'route', you've already done adminLand

your html file

<template name="listUser">
    <h2> List users</h2>
</template>

<template name="listPost">
    <h2> List posts</h2>
</template>

<template name="addPost">
    <h2> Add Post</h2>
</template>

<template name="modPost">
    <h2> Mod Post</h2>
</template>

Upvotes: 1

Related Questions