流星模板不在HTML元素内呈现内容

时间:2015-08-05 07:56:06

标签: meteor iron-router meteor-blaze meteor-accounts

我正在尝试做什么

看起来很简单,但我正在尝试使用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'});

如果没有按预期登录,这将呈现登录页面,但不会在adminLoggingInadminLoginPage模板中的HTML元素内呈现任何内容。

规格

Meteor v1.1.0.3

铁:路由器v1.0.9

结论

我很困惑,为什么Meteor(或Iron:Router)拒绝在某些上下文中呈现某些内容。当然,如果有人有任何想法来帮助解决这个问题,请拍摄;非常感谢。

1 个答案:

答案 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在初始渲染后不会将任何模板附加到正文。