2013-05-26 44 views
3

我目前正在做一个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> 

我使用溃败呃来自陨石。提前致谢!

回答

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

您好,我想我的循环模板 \t {{#each模板}} \t \t {{renderPage}} \t {{/每}} 但是当我的所有模板具有不同的名称并且不会一次渲染所有模板时,我如何循环模板? –

+0

你不必循环你的模板。使用上面的安排,路由器将匹配URL到任何通过'