Question

我现在正在做一个meteorjs网站。但是，我有一个问题，即呈现网站的内容是正确的。（因为我有一个固定的侧边栏）。

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

我正在使用陨石路由器。提前谢谢！

Answer 1

要使用陨石中的路由器，您需要使用您的路线创建一个文件：

<强>的客户机/ router.js

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

然后，您需要在页面中创建一个您想要内容{{renderPage}}

的区域

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

然后只为每条“路线”创建模板，您已经完成了adminLand

您的html文件

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

如何动态呈现模板内容

1 个答案: