如何动态呈现模板内容
问题描述:
我目前正在做一个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>
我使用溃败呃来自陨石。提前致谢!
答
从陨石使用路由器,你需要做一个文件,你的路线:
客户端/ 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>
您好,我想我的循环模板 \t {{#each模板}} \t \t {{renderPage}} \t {{/每}} 但是当我的所有模板具有不同的名称并且不会一次渲染所有模板时,我如何循环模板? –
你不必循环你的模板。使用上面的安排,路由器将匹配URL到任何通过' Akshat
我做了,但它只加载整个页面,但不是侧栏。 –