Question

MeteorJS绝对的菜鸟在这里，所以要温柔......：）

我正在尝试构建一个单页Web应用程序，而我正在使用iron:router。

这个想法是页面中有几个div，比方说3，一个用于菜单，一个永不改变，一个内容应根据菜单选择进行更改。

在常规页面中，我只会加载一个div中的内容。但是对于流星/路由器，我想我会使用layoutTemplate功能并将公共部分放在一个模板中，然后使用{{> yield}}再调用另一个模板。

问题1 ：当我只有/ room模板时工作正常，但是一旦我介绍了/ user模板，它就不会加载:(它加载了一个那一刻，然后跳回到/房间，明显重新加载/房间。现在，当然，我做错了什么，我只是不知道:(

问题2 ：它实际上会在加载/用户时重新加载整个页面，然后返回/ room，这意味着它每次断开连接并重新连接，有没有办法避免这种情况实际上将它保持为一个保持连接的页面应用程序，只将一些模板加载到div中？

router.js：

Router.configure({
    notFoundTemplate: "404"
});

Router.map(function () {
    this.route('/', {
        path: '/',
        layoutTemplate: 'welcome',
        onBeforeAction: function (pause) {
            if (checkLogin()) {
                Router.go('/room');
            } else {
                this.next();
            }
        }
    }),
    this.route('welcome', {
        path: '/welcome',
        layoutTemplate: 'welcome',
        onBeforeAction: function (pause) {
            if (checkLogin()) {
                Router.go('/room');
            } else {
                this.next();
            }
        }
    }),
    this.route('room', {
        path: '/room',
        layoutTemplate: 'base',
        onBeforeAction: baseAction
    }),
    this.route('user', {
        path: '/user',
        layoutTemplate: 'base',
        onBeforeAction: baseAction
    })
});

function baseAction(pause) {
    if (!checkLogin()) {
        Router.go('/welcome');
    } else {
        this.next();
    }
}

function checkLogin() {
    return Meteor.user() ? true : false;
}

base.js：

Template.base.events({
    "click #menu-logout": function () {
        Meteor.logout();
    },
    "click #menu-room": function () {
        window.location.href = '/room';
    },
    "click #menu-user": function () {
        window.location.href = '/user';
    }
});

base.html文件：

<template name="base">
    <div id="menu">
        <table style="height: 33px; width: 100%;">
            <tr>
                <td id="menu-room"><img src="img/logo.png" /></td>
                <td id="menu-user">me</td>
                <td id="menu-logout">logout</td>
            </tr>
        </table>
    </div>
    <div id="content">{{> yield}}</div>
    <div id="list">{{> tmpList}}</div>
</template>

room.html：

<template name="room">
    room data
</template>

user.html：

<template name="user">
    user data
</template>

Answer 1

显然，人们永远不应该放弃：）

列出的两个问题的解决方案是不使用window.location进行导航，而是使用Router.go。

base.js中的这一变化修复了一切：

Template.base.events({
    "click #menu-logout": function () {
        Meteor.logout();
    },
    "click #menu-room": function () {
        Router.go('/room');
    },
    "click #menu-user": function () {
        Router.go('/user');
    }
});

MeteorJS单页面应用程序导航

1 个答案: