Question

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

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

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

Answer 1

Jon Gold的答案过去是正确的，但是as of Meteor 0.5.4：

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

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

Answer 2

据我所知，目前没有开箱即用的方法。

我建议做的是使用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

希望这有帮助。

Answer 3

Meteor-Router让这很容易。我一直在使用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>

Answer 4

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

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

我将不同的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开发者有所帮助。

Answer 5

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

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

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

5 个答案: