如何使用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}