如何使用Meteor创build多页面应用程序?

我是Javascript的新手,刚刚开始摆脱好奇的meteor摆弄。 真正令我惊讶的是,所有的HTML内容似乎都被合并到一个页面中。

我怀疑有一种方法来介绍一些处理指向特殊页面的URL。 看来,“待办事项”的例子是能够通过某种types的Router类来做到这一点。 这是URL处理的“规范”方式吗?

假设我可以处理URL,我将如何构build我的HTML代码来显示单独的页面? 在我的情况下,他们可能都有完全独立的数据集,所以根本不需要共享HTML代码。

Jon Gold的回答曾经是正确的,但是从meteor0.5.4开始 :

现在工作已经转移到铁路路由器。 请考虑在新项目中使用IR而不是路由器!

因此,目前“规范”的做法可能是使用IronRouter 。

据我所知,目前没有这样做的方式。

我build议做的是使用Backbone.js智能包。 Backbone.js带有推送状态路由器,如果用户的浏览器不支持,它将回退到哈希URL。

在你的meteor应用程序目录中input这个meteor add backbone

然后在客户端代码的某个地方创build一个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模板的某个地方,你可以创build一个帮助器,它将根据Session的“currentPage”中设置的值来呈现一个页面。

你可以在这里find更多有关backbone.js路由器的信息: http : //backbonejs.org/#Router

以下是有关如何在Metoer中创buildHandlebars辅助方法的相关信息: http ://docs.meteor.com/#templates

希望这可以帮助。

meteor路由器使这真的很容易。 我一直在用Telescope构build的一些应用程序中使用它作为一个很好的参考。 看看望远镜的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> 

我发现了同样的问题。 当代码变得更大时,很难保持代码清洁。

这里是我的方法来解决这个问题:

我将不同的HTML页面分开,就像我在另一个Web框架中做的那样。 有一个index.html存储根html页面。 然后为每个大的function部分创build一个不同的模板,并把它放在一个不同的HTML。 meteor然后将它们合并。 最后,我创build一个名为operation的会话variables,其中我定义了每次显示的内容。

这里举个简单的例子

的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代码中,我使用Sessionvariables来检查何时打印每个模板,如下所示:

 Template.splash.showSplash = function(){ return Session.get("operation") == 'showSplash'; } 

最后,骨干路由器pipe理这个Sessionvariables

 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开发者有帮助。

这是我的哈希路由解决scheme: https : //gist.github.com/3221138

只需将页面名称作为模板名称,然后导航到/ {name}