如何使用 Meteor 创建多页应用程序？
Posted
技术标签:
【中文标题】如何使用 Meteor 创建多页应用程序？【英文标题】：How do I create multi-page applications with Meteor? 【发布时间】：2012-07-29 05:38:05 【问题描述】：我是 javascript 新手，只是出于好奇才开始摆弄 Meteor。真正让我吃惊的是，似乎所有 html 内容都被合并到一个页面中。
我怀疑有一种方法可以对指向特殊页面的 URL 进行一些处理。似乎“待办事项”示例能够通过某种Router 类来做到这一点。这是 URL 处理的“规范”方式吗？
假设我可以处理 URL，我将如何构建我的 HTML 代码以显示单独的页面？在我的例子中，它们每个都有完全独立的数据集，因此根本不需要共享 HTML 代码。
【问题讨论】：
你应该看看这个：***.com/questions/11461097/…***.com/questions/11501312/default-error-page/… 嗯，这些页面详细说明了如何使用Backbone.Router。似乎 HTML 代码是通过将内容包装在 #if route 指令中来构造的，但这对我来说似乎有点……奇怪……
所有查看此问题的人：当前的解决方案是使用Iron-Router。
【参考方案1】：
据我所知，目前还没有现成的方法可以做到这一点。
我建议做的是使用 Backbone.js 智能包。 Backbone.js 带有 push-state Router，如果用户的浏览器不支持它，它将回退到 hash url。
在您的流星应用程序目录中输入meteor add backbone。
然后在您的客户端代码中的某个位置创建一个 Backbone.js 路由器，如下所示：
var Router = Backbone.Router.extend(
routes:
"": "main", //this will be http://your_domain/
"help": "help" // http://your_domain/help
,
main: function()
// Your homepage code
// for example: Session.set('currentPage', 'homePage');
,
help: function()
// Help page
);
var app = new Router;
Meteor.startup(function ()
Backbone.history.start(pushState: true);
);
然后在你的 Handlebars 模板的某个地方，你可以创建一个助手，它会根据 Session 的“currentPage”中设置的值来呈现一个页面。
你可以在这里找到更多关于backbone.js路由器的信息：http://backbonejs.org/#Router
还有关于如何在 Metoer 中创建 Handlebars 辅助方法的相关信息：http://docs.meteor.com/#templates
希望这会有所帮助。
【讨论】：
不应该是meteor add backbone吗？除此之外，我可能会看看如何使用大量 if 指令来组织我的 HTML 代码...
抱歉！是的，它应该是meteor add backbone。谢谢！
这正是我目前正在做的弓。很好的答案。
你应该看看我的路由器智能包(github.com/tmeasday/meteor-router)，它基于骨干网，但会为你完成布线（还有更多）。【参考方案2】：
这是我对路由的 hacky 解决方案： https://gist.github.com/3221138
只需将页面名称作为模板名称导航到 /name
【讨论】：
好主意，但不允许导航到随机的“帮助”模板吗？ 您可以通过使用包含允许页面的数组来防止这种情况发生，否则重定向到索引。【参考方案3】：我发现了同样的问题。当代码变大时，很难保持代码干净。
这是我解决这个问题的方法：
我将不同的 html 页面分开，就像我对另一个 Web 框架所做的那样。有一个 index.html 我存储根 html 页面。然后对于每个大的功能部分，我创建一个不同的模板并将其放置在一个不同的 html 中。 Meteor 然后将它们全部合并。最后，我创建了一个名为operation 的会话变量，我在其中定义了每次显示的内容。
这是一个简单的例子
index.html
<head>
<title>My app name</title>
</head>
<body>
> splash
> user
> debates
</body>
然后在 splash.html
<template name="splash">
#if showSplash
... your splash html code goes here...
/if
</template>
然后在 user.html
<template name="user">
#if showUser
... your user html code goes here...
/if
</template>
等等……
在 javascript 代码中，我检查何时使用 Session 变量打印每个模板，如下所示：
Template.splash.showSplash = function()
return Session.get("operation") == 'showSplash';
最终由主干路由器管理这个 Session 变量
var DebateRouter = Backbone.Router.extend(
routes:
"": "showSplash",
"user/:userId": "showUser",
"showDebates": "showDebates",
// ...
,
splash: function ()
Session.set('operation', 'showSplash');
this.navigate('/');
,
user: function (userId)
Session.set('operation', 'showUser');
this.navigate('user/'+userId);
,
// etc...
);
我希望这种模式对其他 Meteor 开发人员有所帮助。
【讨论】：
【参考方案4】：Meteor-Router 让这一切变得非常简单。我一直在使用 Telescope 构建的一些应用程序中使用它作为一个很好的参考。看看 Telescope 的router.js
要使用它……
mrt add router
在客户端/router.js 中：
Meteor.Router.add(
'/news': 'news', // renders template 'news'
'/about': function()
if (Session.get('aboutUs'))
return 'aboutUs'; //renders template 'aboutUs'
else
return 'aboutThem'; //renders template 'aboutThem'
,
'*': 'not_found'
);
在您的模板中……
<body>renderPage</body>
【讨论】：
那么Meteor-Router依赖page-js，又依赖page.jsNode包？安装完所有东西后，我仍然收到错误消息：Error: ENOENT, no such file or directory 'C:\Program Files (x86)\Meteor\packages\page-js\page-js\index.js'。哪里出了问题？
我不知道，抱歉 - 除了我知道 Meteor 目前不正式支持 Windows。
Meteor 确实支持Tom Wijsman's help，但陨石不支持（这就是为什么我不太喜欢那个“又一个包装”的想法）。但是，我可以从他们的存储库中克隆流星路由器和 page-js 并在 Windows 中创建包（嗯，文件夹并将存储库的内容复制到其中）。知道谁知道吗？
想通了：仅仅npm install page 是不够的。我克隆了 repo git clone git://github.com/visionmedia/page.js.git 并将其复制到 .\Meteor\packages\page-js\page-js
要使用这个包，我们现在可以使用'code' meteor add iron:router 'code'。现在不需要使用陨石了。【参考方案5】：
Jon Gold 的回答曾经是正确的，但 as of Meteor 0.5.4：
工作现已转移到 Iron Router。请考虑在新项目中使用 IR 而不是路由器！
因此，当前执行此操作的“规范”方式可能是使用IronRouter。
【讨论】：
目前最好的选择是调查Angular和React的Meteor。 @sfiore 虽然对 Angular 和 React 的支持是一个很酷的新增功能，但它们都是 单页 应用程序框架。除非您能够使用 Angular 或 React 路由器在流星中完成服务器端渲染（我不确定这是否可行），否则这些对于多页应用程序来说不是可行的解决方案。以上是关于如何使用 Meteor 创建多页应用程序？的主要内容，如果未能解决你的问题，请参考以下文章
Meteor - 如何创建像 *** 这样的页面浏览量或点击次数
如何使用 vue-cli(webpack) 创建多页应用程序（每个应用程序使用不同的路由器，以及不同的 dist/index.html）