55

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

我怀疑有一种方法可以对指向特殊页面的 URL 进行一些处理。似乎“待办事项”示例能够通过某种类来做到这一点Router。这是 URL 处理的“规范”方式吗？

假设我可以处理 URL，我将如何构建我的 HTML 代码以显示单独的页面？就我而言，它们每个都可以拥有完全独立的数据集，因此根本不需要共享 HTML 代码。

4

5 回答 5

30

Jon Gold 的回答曾经是正确的，但从Meteor 0.5.4 开始：

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

因此，当前执行此操作的“规范”方法可能是使用IronRouter。

于 2013-11-17T23:39:15.710 回答
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});
});

然后在您的 Handlebars 模板中的某处，您可以创建一个助手，该助手将根据 Session 的“currentPage”中设置的值呈现页面。

您可以在此处找到有关backbone.js 路由器的更多信息：http: //backbonejs.org/#Router

还有关于如何在 Metoer 中创建 Handlebars 辅助方法的相关信息：http: //docs.meteor.com/#templates

希望这可以帮助。

于 2012-07-31T13:40:49.367 回答
26

Meteor-Router让这一切变得非常简单。我一直在使用 Telescope 构建的一些应用程序中使用它作为一个很好的参考。看看 Telescope 的router.js

要使用它……</p>

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

在您的模板中……</p> 

<body>{{renderPage}}</body>
于 2013-02-02T14:15:59.670 回答
10

我发现了同样的问题。当代码变大时，很难保持代码干净。

这是我解决这个问题的方法：

我将不同的 html 页面分开，就像我对另一个 Web 框架所做的那样。有一个index.html我存储根 html 页面的位置。然后对于每个重要的功能部分，我创建一个不同的模板并将其放置在一个不同的 html 中。Meteor 然后将它们全部合并。最后我创建了一个会话变量operation，我在其中定义了每次显示的内容。

这是一个简单的例子

索引.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';
}

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

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 开发人员有所帮助。

于 2013-01-26T10:38:43.820 回答
7

这是我对路由的 hacky 解决方案： https ://gist.github.com/3221138

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

于 2012-07-31T22:21:14.453 回答