看起来很简单,但我正在尝试使用Meteor的帐户系统和Iron:Router为网络应用程序设置管理系统。管理部分是具有帐户的应用程序的唯一部分。管理部分位于/admin
并且具有登录模板和管理员登录后应显示的数据模板。
基本路由器
Router.route('/', {
template: 'user' // Not shown; works fine
});
Router.route('/admin', {
template: 'adminDataPage'
});
模板
<template name="adminLoginPage">
<div class="cover-wrapper-outer page-admin login">
<div class="cover-wrapper-inner">
<div class="cover-container">
<div class="cover">
<form class="admin-login-form">
<div class="alert alert-danger login-failure">
The username or password is incorrect.
</div>
<input class="form-control username" name="username" type="text" placeholder="Username">
<input class="form-control password" name="password" type="password" placeholder="Password">
<input class="form-control submit" name="submit" type="submit" value="Log in">
</form>
</div>
</div>
</div>
</div>
</template>
<template name="adminDataPage">
<div class="container-fluid page-admin admin-content">
<div class="row">
<div class="col-xs-12">
<div class="scrolling-table">
<table class="table table-striped">
<thead>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td>Make</td>
<td>Model</td>
<td>Engine</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<template name="adminLoggingIn">
Logging in...
</template>
(目前这是不完整的,但与问题无关。)
无论我做什么,adminDataPage
模板内的内容都不会呈现。但是,HTML元素中的不是的任何内容都是呈现的。例如,此将呈现:
<template name="adminDataPage">
Hello world!
</template>
以下中的world
不会呈现:
<template name="adminDataPage">
Hello <span>world</span>!
</template>
adminLoggingIn
模板也是如此。但是,adminLoginPage
模板中的任何内容都可以正常运行。
本质上,显示登录框,客户端Javascript(未显示)负责登录用户,用户看到Logging in...
,然后用户看不到任何内容,浏览器中没有显示任何内容检查器(除非adminDataPage
模板中有未嵌套的纯文本)。
如果是currentUser
<template name="adminDataPage">
{{#if currentUser}}
<div class="container-fluid page-admin admin-content">
<div class="row">
<div class="col-xs-12">
<div class="scrolling-table">
<table class="table table-striped">
<thead>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td>Make</td>
<td>Model</td>
<td>Engine</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{{else}}
<div class="cover-wrapper-outer page-admin login">
<div class="cover-wrapper-inner">
<div class="cover-container">
<div class="cover">
<form class="admin-login-form">
<div class="alert alert-danger login-failure">
The username or password is incorrect.
</div>
<input class="form-control username" name="username" type="text" placeholder="Username">
<input class="form-control password" name="password" type="password" placeholder="Password">
<input class="form-control submit" name="submit" type="submit" value="Log in">
</form>
</div>
</div>
</div>
</div>
{{/if}}
</template>
这将在未登录时呈现登录页面,如预期的那样。但是,登录后,不会呈现任何内容。我也试过整合{{#if loggingIn}}
,但无济于事。
铁:路由器挂钩
Router.route('/', {
template: 'user'
});
Router.route('/admin', {
template: 'adminDataPage'
});
var requireLogin = function() {
if (! Meteor.user()) {
if (Meteor.loggingIn()) {
this.render('adminLoggingIn');
} else {
this.render('adminLoginPage');
}
} else {
this.next();
}
};
Router.onBeforeAction(requireLogin, {only: 'admin'});
如果没有按预期登录,这将呈现登录页面,但不会在adminLoggingIn
或adminLoginPage
模板中的HTML元素内呈现任何内容。
Meteor v1.1.0.3
铁:路由器v1.0.9
我很困惑,为什么Meteor(或Iron:Router)拒绝在某些上下文中呈现某些内容。当然,如果有人有任何想法来帮助解决这个问题,请拍摄;非常感谢。
答案 0 :(得分:1)
Blaze.render()
似乎有错。在控制台中使用Blaze.render(Template.adminDataPage, document.body)
将不会呈现任何内容 - 就像在我的问题明文中直接嵌套在body元素中一样。它不会在体内嵌套任何DOM元素。
为了测试,我创建了一个DOM元素<div class="test"></div>
,将其嵌套在页面主体中,并调用Blaze.render(Template.adminDataPage, $('.test')[0])
并且它有效。它没有正确格式化,但它确实有效。
为Iron添加布局模板:使用的路由器修复了问题,如下所示:
<template name="adminPage">
<div class="test">
{{> yield}}
</div>
</template>
Router.route('/admin', {
name: 'admin',
template: 'adminDataPage',
layoutTemplate: 'adminPage'
});
var requireLogin = function() {
login_dep.depend();
if (! Meteor.user()) {
if (Meteor.loggingIn()) {
this.render('adminLoggingIn');
console.log('Logging in page');
} else {
this.render('adminLoginPage');
console.log('Login page');
}
} else {
this.next();
console.log('Data page');
}
};
Router.onBeforeAction(requireLogin, {only: 'admin'});
此外,将{{#if currentUser}}
嵌套在另一个元素中:
<template name="adminPage">
<div class="test">
{{#if currentUser}}
<div class="container-fluid page-admin admin-content">
<div class="row">
<div class="col-xs-12">
<div class="scrolling-table">
<table class="table table-striped">
<thead>
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td>Make</td>
<td>Model</td>
<td>Engine</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{{else}}
<div class="cover-wrapper-outer page-admin login">
<div class="cover-wrapper-inner">
<div class="cover-container">
<div class="cover">
<form class="admin-login-form">
<div class="alert alert-danger login-failure">
The username or password is incorrect.
</div>
<input class="form-control username" name="username" type="text" placeholder="Username">
<input class="form-control password" name="password" type="password" placeholder="Password">
<input class="form-control submit" name="submit" type="submit" value="Log in">
</form>
</div>
</div>
</div>
</div>
{{/if}}
</div>
</template>
Router.route('/admin', {
name: 'admin',
template: 'adminPage'
});
我不确定为什么Blaze拒绝将某些元素附加到body元素上,但这些是一些解决方法。
我发现一个更好的解决方法是添加一个Blaze可以添加模板DOM的元素。 Blaze.render(Template.adminDataPage, document.body, $('.render-fix')[0])
在初始渲染时,在{DOM}中放置render-fix
类的隐藏元素将起作用。实质上:
<template name="adminPage">
{{#if currentUser}}
<div>User logged in stuff</div>
{{else}}
<div>User not logged in stuff</div>
{{/if}}
<div class="render-fix" style="display: none"></div>
</template>
在我看来,Blaze在初始渲染后不会将任何模板附加到正文。