如何使用Meteor创建多页面应用程序？

I am new to Javascript and just started fiddling around with Meteor out of curiosity. What really surprises me, is that it seems that all HTML content gets combined into a single page.

我是Javascript的新手，只是出于好奇而开始摆弄Meteor。让我感到惊讶的是，似乎所有HTML内容都被合并到一个页面中。

I suspect there is a way to introduce some handling of URLs directing to special pages. It seems that the "todo" example is capable of doing this via some kind of Router class. Is that the "canonical" way of URL handling?

我怀疑有一种方法可以引入一些指向特殊页面的URL处理。似乎“todo”示例能够通过某种Router类来实现。这是URL处理的“规范”方式吗？

Assuming I can handle URLs, how would I structure my HTML code to display separate pages? In my case they could each have completely separate sets of data, so no HTML code needs to be shared at all.

假设我可以处理URL，我如何构建我的HTML代码以显示单独的页面？在我的情况下，他们每个人都可以拥有完全独立的数据集，因此根本不需要共享任何HTML代码。

5 个解决方案

#1

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. Please consider using IR instead of Router on new projects!

工作现在已转移到Iron Router。请考虑在新项目中使用IR而不是Router！

Thus, the current "canonical" way to do this is probably to use IronRouter.

因此，目前的“规范”方式可能是使用IronRouter。

#2

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 comes with the push-state Router, and if the user's browser doesn't support that it will fallback to hash urls.

我建议做的是使用Backbone.js智能包。 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

Meteor-Router makes this really easy. I've been using it in some apps I've been building with Telescope as a good reference. Have a look at Telescope's router.js

Meteor-Router让这很容易。我一直在使用Telescope构建的一些应用程序中使用它作为一个很好的参考。看看Telescope的router.js

To use it…

要用它......

mrt add router

mrt添加路由器

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

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. There is an index.html where I store the root html page. And then for each big functional part I create a different template and place it in one different html. Meteor then merges them all. Finally I create a session variable called operation where I define what to show at each time.

我将不同的html页面与其他Web框架分开。有一个index.html，我存储根html页面。然后对于每个大功能部分，我创建一个不同的模板并将其放在一个不同的html中。然后流星将它们全部合并。最后，我创建了一个名为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

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}

#1