Mar*_*mer 55 javascript url-routing meteor
我是Javascript的新手,只是出于好奇而开始摆弄Meteor.让我感到惊讶的是,似乎所有HTML内容都被合并到一个页面中.
我怀疑有一种方法可以引入一些指向特殊页面的URL处理.似乎"todo"示例能够通过某种类来实现Router.这是URL处理的"规范"方式吗？
假设我可以处理URL,我将如何构建HTML代码以显示单独的页面？在我的情况下,他们每个人都可以拥有完全独立的数据集,因此根本不需要共享任何HTML代码.
use*_*584 30
Jon Gold的答案过去是正确的,但截至Meteor 0.5.4:
工作现在已转移到Iron Router.请考虑在新项目中使用IR而不是Router!
因此,目前的"规范"方式可能是使用IronRouter.
nsm*_*eta 29
据我所知,目前还没有开箱即用的方法.
我建议做的是使用Backbone.js智能包.Backbone.js带有推送状态路由器,如果用户的浏览器不支持它,它将回退到哈希网址.
在您的meteor app目录中输入此内容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
希望这可以帮助.
Jon*_*old 26
Meteor-Router让这很容易.我一直在使用Telescope构建的一些应用程序中使用它作为一个很好的参考.看看Telescope的router.js
要用它......
mrt add router
在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'
});
在你的模板中......
<body>{{renderPage}}</body>
Car*_*ona 10
我发现了同样的问题.当代码变大时,很难保持代码清洁.
这是我解决这个问题的方法:
我将其他html页面分开,就像我对其他Web框架一样.有一个index.html地方我存储根HTML页面.然后对于每个大功能部分,我创建一个不同的模板并将其放在一个不同的html中.然后流星将它们全部合并.最后,我创建了一个会话变量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';
}
最后,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...
});
我希望这种模式对其他Meteor开发人员有所帮助.
| 归档时间： |
|
| 查看次数： |
22737 次 |
| 最近记录： |