Как создать многостраничные приложения с помощью Meteor?

Я новичок в Javascript и просто начал заниматься Метеором из любопытства. Что меня действительно удивляет, так это то, что все содержимое HTML объединяется в одну страницу.

Я подозреваю, что есть способ ввести некоторую обработку URL-адресов, направляющих специальные страницы. Кажется, что пример "todo" способен сделать это через какой-то класс Router. Это "канонический" способ обработки URL?

Предполагая, что я могу обрабатывать URL-адреса, как бы я структурировал свой HTML-код для отображения отдельных страниц? В моем случае они могли бы иметь полностью отдельные наборы данных, поэтому HTML-код вообще не должен быть общим.

Ответ 1

Ответ Jon Gold был правильным, но от Meteor 0.5.4:

Теперь работа переключилась на Iron Router. Пожалуйста, подумайте об использовании IR вместо Router в новых проектах!

Таким образом, текущий "канонический" способ сделать это, вероятно, будет использовать IronRouter.

Ответ 2

Насколько мне известно, в настоящее время не существует способа сделать это.

То, что я предлагаю сделать, - использовать смарт-пакет Backbone.js. Backbone.js поставляется с маршрутизатором push-state, и если браузер пользователя не поддерживает его, он откажется от хэш-адресов.

В каталоге вашего приложения meteor введите meteor add backbone.

Затем где-то в вашем клиентском коде создайте Backbone.js Router так:

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 router можно найти здесь: http://backbonejs.org/#Router

Также соответствующая информация о том, как создать метод помощника Handlebars в Metoer: http://docs.meteor.com/#templates

Надеюсь, что это поможет.

Ответ 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>

Ответ 4

Я нашел ту же проблему. Когда код становится больше, сложно сохранить код в чистоте.

Вот мой подход к этой проблеме:

Я разделяю разные html-страницы, как я бы сделал с другой веб-картой. Существует index.html, где я храню страницу root 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 управляет этой переменной сеанса

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.

Ответ 5

Это мое хакерское решение для маршрутизации: https://gist.github.com/3221138

Просто введите имя страницы в качестве имени шаблона en, чтобы перейти к/{name}