Javascript 如何使用 Meteor 创建多页应用程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11740368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create multi-page applications with Meteor?
提问by Marcus Riemer
I am new to Javascript and just started fiddling around with Meteor out of curiosity. What really surprises me, is that it seems that all HTML content gets combined into a single page.
我是 Javascript 的新手，出于好奇，我刚刚开始摆弄 Meteor。真正让我感到惊讶的是，似乎所有 HTML 内容都合并到一个页面中。
I suspect there is a way to introduce some handling of URLs directing to special pages. It seems that the "todo" example is capable of doing this via some kind of Routerclass. Is that the "canonical" way of URL handling?
我怀疑有一种方法可以对指向特殊页面的 URL 进行一些处理。似乎“todo”示例能够通过某种类来做到这一点Router。这是 URL 处理的“规范”方式吗？
Assuming I can handle URLs, how would I structure my HTML code to display separate pages? In my case they could each have completely separate sets of data, so no HTML code needs to be shared at all.
假设我可以处理 URL，我将如何构建我的 HTML 代码以显示单独的页面？就我而言，它们每个都可以拥有完全独立的数据集，因此根本不需要共享 HTML 代码。
采纳答案by user456584
Jon Gold's answer used to be correct, but as of Meteor 0.5.4:
Jon Gold 的回答曾经是正确的，但从Meteor 0.5.4 开始：
Work has now shifted to Iron Router. Please consider using IR instead of Router on new projects!
现在工作已转移到 Iron Router 上。请考虑在新项目中使用 IR 而不是路由器！
Thus, the current "canonical" way to do this is probably to use IronRouter.
因此，目前执行此操作的“规范”方法可能是使用IronRouter。
回答by nsmeta
As far as I am aware, there is currently no out of the box way to do this.
据我所知，目前没有开箱即用的方法来做到这一点。
What I suggest to do, is to use Backbone.js smart package. Backbone.js comes with the push-state Router, and if the user's browser doesn't support that it will fallback to hash urls.
我建议做的是使用 Backbone.js 智能包。Backbone.js 带有推送状态路由器，如果用户的浏览器不支持它，它将回退到哈希 url。
In your meteor app directory type this meteor add backbone.
在您的meteor 应用程序目录中输入这个meteor add backbone。
Then somewhere in your client-side code create a Backbone.js Router like so:
然后在客户端代码的某个地方创建一个 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});
});
Then somewhere in your Handlebars template, you can create a helper that will render a page based on the value set in Session's "currentPage".
然后在您的 Handlebars 模板中的某处，您可以创建一个助手，该助手将根据 Session 的“currentPage”中设置的值呈现页面。
You can find more information about backbone.js router here: http://backbonejs.org/#Router
您可以在此处找到有关backbonejs.js 路由器的更多信息：http: //backbonejs.org/#Router
Also relevant information on how to create a Handlebars helper method in Metoer here: http://docs.meteor.com/#templates
还有关于如何在 Metoer 中创建 Handlebars 辅助方法的相关信息：http://docs.meteor.com/#templates
Hope this helps.
希望这可以帮助。
回答by Jon Gold
Meteor-Routermakes this really easy. I've been using it in some apps I've been building with Telescope as a good reference. Have a look at Telescope's router.js
Meteor-Router让这一切变得非常简单。我一直在使用 Telescope 构建的一些应用程序中使用它作为很好的参考。看看 Telescope 的router.js
To use it…
要使用它…
mrt add router
mrt add router
In client/router.js:
在客户端/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'
});
In your template…
在您的模板中...
<body>{{renderPage}}</body>
回答by Carlos Barcelona
I found the same problem. When the code gets bigger it is difficult to keep the code clean.
我发现了同样的问题。当代码变大时，很难保持代码干净。
Here goes my approach to this problem:
这是我解决这个问题的方法：
I separate the different html pages as I would do with another web framework. There is an index.htmlwhere I store the root html page. And then for each big functional part I create a different template and place it in one different html. Meteor then merges them all. Finally I create a session variable called operationwhere I define what to show at each time.
我将不同的 html 页面分开，就像我对另一个 Web 框架所做的那样。有一个index.html我存储根html页面的地方。然后对于每个大的功能部分，我创建了一个不同的模板并将其放置在一个不同的 html 中。Meteor 然后将它们全部合并。最后，我创建了一个会话变量，称为operation我定义每次显示的内容。
Here goes a simple example
这是一个简单的例子
index.html
索引.html
<head>
<title>My app name</title>
</head>
<body>
{{> splash}}
{{> user}}
{{> debates}}
</body>
then in splash.html
然后在splash.html 中
<template name="splash">
{{#if showSplash}}
... your splash html code goes here...
{{/if}}
</template>
then in user.html
然后在user.html
<template name="user">
{{#if showUser}}
... your user html code goes here...
{{/if}}
</template>
and so on ...
等等 ...
In the javascript code then I check when to print each template using the Session variable, like this:
在 javascript 代码中，我检查何时使用 Session 变量打印每个模板，如下所示：
Template.splash.showSplash = function(){
return Session.get("operation") == 'showSplash';
}
Finally the Backbone Router manages this Session variable
最后，骨干路由器管理这个会话变量
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...
});
I hope this pattern is helpful for other Meteor developers.
我希望这个模式对其他 Meteor 开发者有帮助。
回答by Lander Van Breda
This is my hacky solution to routing : https://gist.github.com/3221138
这是我的路由解决方案：https: //gist.github.com/3221138
Just put the page name as the template name en navigate to /{name}
只需将页面名称作为模板名称导航到 /{name}
