如何使用Meteor创建多页面应用程序？
[英]How do I create multi-page applications with Meteor?
问题描述
I am new to Javascript and just started fiddling around with Meteor out of curiosity. 
我是Javascript的新手，只是出于好奇而开始摆弄Meteor。 What really surprises me, is that it seems that all HTML content gets combined into a single page. 让我感到惊讶的是，似乎所有HTML内容都被合并到一个页面中。
I suspect there is a way to introduce some handling of URLs directing to special pages. 我怀疑有一种方法可以引入一些指向特殊页面的URL处理。 It seems that the "todo" example is capable of doing this via some kind of Router class. 似乎“todo”示例能够通过某种Router类来实现。 Is that the "canonical" way of URL handling? 这是URL处理的“规范”方式吗？
Assuming I can handle URLs, how would I structure my HTML code to display separate pages? 假设我可以处理URL，我将如何构建HTML代码以显示单独的页面？ In my case they could each have completely separate sets of data, so no HTML code needs to be shared at all. 在我的情况下，他们每个人都可以拥有完全独立的数据集，因此根本不需要共享任何HTML代码。
5 个解决方案
解决方案1
30 已采纳 2013-11-17 23:39:15
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.
Thus, the current "canonical" way to do this is probably to use IronRouter . 因此，目前的“规范”方式可能是使用IronRouter 。
解决方案2
29 2012-07-31 13:40:49
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智能包。 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带有推送状态路由器，如果用户的浏览器不支持它，它将回退到哈希网址。
In your meteor app directory type this meteor add backbone . 在你的meteor app目录中输入这个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 你可以在这里找到有关backbone.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. 希望这可以帮助。
解决方案3
26 2013-02-02 14:15:59
Meteor-Router makes this really easy. Meteor-Router让这很容易。 I've been using it in some apps I've been building with Telescope as a good reference. 我一直在使用Telescope构建的一些应用程序中使用它作为一个很好的参考。 Have a look at Telescope's router.js 看看Telescope的router.js
To use it… 要用它......
mrt add router
In client/router.js: 在client / 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>
解决方案4
10 2013-01-26 10:38:43
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. 我将其他html页面分开，就像我对其他Web框架一样。 There is an index.html where I store the root html page. 有一个index.html ，我存储根html页面。 And then for each big functional part I create a different template and place it in one different html. 然后对于每个大功能部分，我创建一个不同的模板并将其放在一个不同的html中。 Meteor then merges them all. 然后流星将它们全部合并。 Finally I create a session variable called operation where I define what to show at each time. 最后，我创建了一个名为operation的会话变量，我在每次定义要显示的内容。
Here goes a simple example 这是一个简单的例子
index.html 的index.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 最后，Backbone Router管理此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...
});
I hope this pattern is helpful for other Meteor developers. 我希望这种模式对其他Meteor开发人员有所帮助。
解决方案5
7 2012-07-31 22:21:14
This is my hacky solution to routing : https://gist.github.com/3221138 这是我对路由的hacky解决方案： https ： //gist.github.com/3221138
Just put the page name as the template name en navigate to /{name} 只需将页面名称作为模板名称，然后导航到/ {name}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.