Jak tworzyć aplikacje wielostronicowe za pomocą Meteor?

Jestem nowy w Javascript i właśnie zacząłem bawić się Meteorem z ciekawości. Co naprawdę mnie zaskakuje, to to, że wydaje się, że cała zawartość HTML jest łączona w jedną stronę.

Podejrzewam, że istnieje sposób na wprowadzenie obsługi adresów URL kierujących do stron specjalnych. Wydaje się, że przykład "todo" jest w stanie to zrobić poprzez jakąś klasę Router. Czy to jest "kanoniczny" sposób obsługi adresów URL?

Zakładając, że mogę obsługiwać adresy URL, jak struktura mojego kodu HTML, aby wyświetlać oddzielne strony? W moim przypadku każdy z nich może mieć zupełnie oddzielne zestawy danych, więc żaden kod HTML nie musi być w ogóle udostępniany.

Author: Coleman, 2012-07-31
Source

5 answers

Jon Gold ' s answer used to be correct, but as of Meteor 0.5.4:

Praca została przeniesiona do routera Żelaznego. Rozważ używanie IR zamiast routera w nowych projektach!

Tak więc, obecny "kanoniczny" sposób na to, to prawdopodobnie użycie IronRouter.
 30
Author: user456584,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-17 23:39:15

O ile mi wiadomo, nie ma obecnie wyjętego z pudełka sposobu, aby to zrobić.

To, co sugeruję zrobić, to użyć szkieletu.pakiet js smart. Kręgosłup.js jest dostarczany z routerem typu push-state, a jeśli przeglądarka użytkownika nie obsługuje, zostanie wycofany do hashowych adresów URL.

W katalogu aplikacji meteor wpisz to meteor add backbone.

Następnie gdzieś w kodzie po stronie klienta stwórz kręgosłup.Router js jak TAK: 

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

Wtedy gdzieś w szablonie kierownicy możesz utworzyć helper, który wyrenderuje stronę na podstawie wartości ustawionej w "currentPage" sesji.

Możesz znaleźć więcej informacji na temat szkieletu.router js tutaj: http://backbonejs.org/#Router

Również istotne informacje o tym, jak utworzyć metodę Handlebars helper w Metoer tutaj: http://docs.meteor.com/#templates

Mam nadzieję, że to pomoże.
 29
Author: nsmeta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-31 15:46:20

Meteor-Router sprawia, że to naprawdę proste. Używam go w niektórych aplikacjach, które buduję z teleskopem jako dobrym punktem odniesienia. Spójrz na router teleskopu.js

Aby go użyć...

mrt add router

W kliencie / routerze.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'
});

W szablonie ... 

<body>{{renderPage}}</body>
 26
Author: Jon Gold,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-30 16:14:10

Znalazłem ten sam problem. Gdy kod staje się większy, trudno jest utrzymać go w czystości.

Oto moje podejście do tego problemu:

Oddzielam różne strony html tak, jak robiłbym to z innym frameworkiem internetowym. Jest index.html gdzie przechowuję główną stronę html. A następnie dla każdej dużej części funkcjonalnej tworzę inny szablon i umieszczam go w jednym innym html. Meteor następnie łączy je wszystkie. Na koniec tworzę zmienną sesyjną o nazwie operation gdzie definiuję co do Pokaż za każdym razem.

Oto prosty przykład

Indeks.html 

<head>
  <title>My app name</title>
</head>

<body>
 {{> splash}}
 {{> user}}
 {{> debates}}
</body>

Następnie w splash.html 

<template name="splash">
    {{#if showSplash}}
      ... your splash html code goes here...
    {{/if}}
</template>

Następnie w user.html 

<template name="user">
    {{#if showUser}}
      ... your user html code goes here...
    {{/if}}
</template>

I tak dalej ...

W kodzie javascript sprawdzam, kiedy wydrukować każdy szablon używając zmiennej Sesyjnej, tak: 

Template.splash.showSplash = function(){
    return Session.get("operation") == 'showSplash';
}

Wreszcie Router szkieletowy zarządza zmienną sesji 

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

Mam nadzieję, że ten wzór będzie pomocny dla innych twórców Meteor.

 10
Author: Carlos Barcelona,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-26 10:38:43

To jest moje hacky rozwiązanie do routingu : https://gist.github.com/3221138

Po prostu umieść nazwę strony jako nazwę szablonu PL przejdź do /{NAZWA}

 7
Author: Lander Van Breda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-31 22:21:14