如何创建与流星多页的应用程序？(How do I create multi-page applica

我是新来的Javascript和刚开始摆弄周围有流星出于好奇。真正让我惊讶的是，它似乎所有的HTML内容被合并成一个单一页面。

我怀疑有一种方法引入的URL定向到专用页面的一些处理。看来，“待办事项”的例子就是能够通过某种这样的Router类。是的URL处理“规范”的方式？

假设我能处理的URL，我将如何构建我的HTML代码来显示不同的页面？在我的情况下，他们可能都有数据的完全独立的组，所以需要在所有没有共享的HTML代码。

Answer 1:

乔恩·金的答案曾经是正确的，但由于流星0.5.4的：

工作现已转向铁路由器。请考虑使用IR，而不是路由器上的新项目！

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

Answer 2:

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

我建议做的，就是用Backbone.js的智能包装。 Backbone.js的带有推状态路由器，并且如果用户的浏览器不支持，这将回退到哈希的URL。

在您的流星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});
});

然后在某处你把手模板，你可以创建一个帮手将基于会话的“当前页”的设置值呈现页面。

你可以在这里找到有关Backbone.js的路由器的详细信息： http://backbonejs.org/#Router

对此处创建Metoer一个把手辅助方法，也与此相关的信息： http://docs.meteor.com/#templates

希望这可以帮助。

Answer 3:

流星路由器使这很容易。我一直在使用它的一些应用程序我一直在建设有望远镜作为一个很好的参考。看看望远镜的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>

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

最后，骨干路由器管理这个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...
});

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