MeteorJS 单页应用导航

Question

这里是 MeteorJS 绝对菜鸟，所以要温柔...:)

我正在尝试构建一个单页网络应用程序，并且我正在使用 iron:router。

想法是页面中有几个 div，比方说 3 个，一个用于菜单，一个永远不会改变，另一个内容应该根据菜单选择而改变。

在常规页面中，我只加载该页面中的内容 div。但是对于 meteor/router 我想我会使用 layoutTemplate 功能并将公共部分放在一个模板中，然后用 {{> yield}}.

调用另一个模板

问题 1：当我只有 /room 模板时效果很好，但是一旦我引入 /user 模板，它就不会加载:(加载片刻，然后跳回 /room，明显地重新加载 /room。现在，当然我做错了什么，我只是看不到什么:(

问题2: 每次加载/user，然后返回/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 单页应用导航

MeteorJS one-page-app navigation

meteor

iron-router