2012-07-31 68 views
55

我是Javascript新手,刚刚开始摆弄好奇的流星。真正令我惊讶的是,所有的HTML内容似乎都被合并到一个页面中。如何使用Meteor创建多页面应用程序?

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

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

+3

你应该看看这个: http://stackoverflow.com/questions/11461097/meteorjs-routing-with-backbone-js http://stackoverflow.com/questions/ 11501312/default-error-page/11513336#11513336 – fraherm 2012-07-31 12:54:13

+2

嗯,这些页面详细说明如何使用'Backbone.Router'。看起来HTML代码是通过在'{{#if}}'指令中包装内容来构造的,但是对我来说这似乎有点......奇怪。 – 2012-07-31 13:21:08

+3

全部查看此问题:目前的解决方案是使用'铁路由器'。 – 2013-12-08 04:26:12

回答

30

乔恩·金的答案曾经是正确的,但as of Meteor 0.5.4

Work has now shifted to Iron Router. Please consider using IR instead of Router on new projects!

因此,目前的“规范”的方式来做到这一点可能是使用IronRouter

+0

当前最好的选择是调查[Angular](https://www.meteor.com/tutorials/angular/creating-an-app)和[React](https://www.meteor.com/tutorials/react/为流星创造一个应用程序)。 – sfiore 2015-10-02 15:44:34

+0

@sfiore尽管对Angular和React的支持是一个很酷的新增功能,但它们都是单页应用程序框架。除非你能够使用Angular或React路由器(我甚至不确定这是否可能)在流星内部实现服务器端渲染,否则这些对于多页面应用来说不是可行的解决方案。 – user456584 2015-10-02 16:07:48

29

据我所知,目前没有现成的方法来做到这一点。

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

在你的流星应用程序目录中输入这个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}); 
}); 

然后某处,你可以创建一个帮助,将根据设定的值呈现页面在Session的“currentPage”中。

您可以找到有关Backbone.js的路由器这里的更多信息:http://backbonejs.org/#Router

还就如何创建Metoer这里的手把helper方法的相关信息:http://docs.meteor.com/#templates

希望这有助于。

+0

不应该认为'meteor add backbone'?除此之外,我可能会看看如何组织我的HTML代码加载if指令... – 2012-07-31 14:16:34

+0

道歉!是的,它应该是'meteor add backbone'。谢谢! – nsmeta 2012-07-31 15:46:02

+0

这正是我目前正在做的。好答案。 – Adgezaza 2012-07-31 21:18:19

7

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

只要把该页面的名称作为模板名恩导航到/ {name}的

+1

不错的主意,但不允许导航到随机“帮手”模板? – 2012-08-01 07:07:05

+0

您可以通过使用包含允许的页面的数组来阻止该操作,否则将重定向到索引。 – 2012-08-01 08:36:59

+0

'angularjs'现在可以用于那个,对吧? – 2012-12-18 23:41:03

10

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

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

我分开不同的HTML页面,因为我将与其他Web框架做。有一个index.html我存储根html页面。然后为每个大功能部分创建一个不同的模板并将其放在一个不同的html中。流星然后将它们合并。最后,我创建一个名为operation的会话变量,其中我定义了每次要显示的内容。

这里不用然后在溅一个简单的例子

的index.html

<head> 
    <title>My app name</title> 
</head> 

<body> 
{{> splash}} 
{{> user}} 
{{> debates}} 
</body> 

。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'; 
} 

最后主干路由器管理这个会话变量

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... 
}); 

我希望这种模式对其他流星开发者有帮助。

26

Meteor-Router使这很容易。我一直在用望远镜构建的一些应用程序中使用它作为很好的参考。看看望远镜的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> 
+0

看起来不错,肯定会考虑的。谢谢 – 2013-02-05 22:31:41

+1

所以[Meteor-Router](https://github.com/tmeasday/meteor-router)依赖于[page-js](https://atmosphere.meteor.com/package/page-js),它依赖于在[page.js]上(https:// github。com/visionmedia/page.js)节点包?安装完所有东西后,我仍然得到错误:'错误:ENOENT,没有这样的文件或目录'C:\ Program Files(x86)\ Meteor \ packages \ page-js \ page-js \ index.js''。哪里出了问题? – 2013-02-06 16:00:33

+0

我不知道,对不起 - 除此之外,我知道Meteor现在还没有正式支持Windows。 – 2013-02-06 20:59:11

相关问题