Comment créer des applications multi-pages avec Meteor?

Je suis nouveau sur Javascript et je viens de jouer avec Meteor par curiosité. Ce qui me surprend vraiment, c'est qu'il semble que tout le contenu HTML soit combiné en une seule page.

Je soupçonne qu'il existe un moyen d'introduire une certaine manipulation des URL en direction de pages spéciales. Il semble que l'exemple "tout" soit capable de le faire via une sorte de classe de Router . Est-ce la manière «canonique» de la gestion des URL?

En supposant que je peux gérer les URL, comment structurez-vous mon code HTML pour afficher des pages distinctes? Dans mon cas, ils pouvaient chacun avoir des ensembles de données complètement séparés, de sorte qu'aucun code HTML ne doit être partagé.

La réponse de Jon Gold était correcte, mais à partir de Meteor 0.5.4 :

Le travail a maintenant changé pour Iron Router. S'il vous plaît envisager d'utiliser IR au lieu de routeur sur de nouveaux projets!

Ainsi, le mode "canonique" actuel pour ce faire est probablement d'utiliser IronRouter .

Pour autant que je sache, il n'existe actuellement aucun moyen de faire cela.

Ce que je suggère de faire, c'est utiliser le package intelligent Backbone.js. Backbone.js est livré avec le routeur push-state, et si le navigateur de l'utilisateur ne supporte pas qu'il retournera aux URL de hash.

Dans votre répertoire d'application de météores, tapez cet meteor add backbone .

Ensuite, quelque part dans votre code côté client, créez un routeur Backbone.js de la manière suivante:

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

Ensuite, quelque part dans votre modèle Handlebars, vous pouvez créer un assistant qui rendra une page basée sur la valeur définie dans "CurrentPage" de Session.

Vous trouverez plus d'informations sur le routeur backbone.js ici: http://backbonejs.org/#Router

Vous trouverez également des informations pertinentes sur la façon de créer une méthode d'aide aux guidons dans Metoer ici: http://docs.meteor.com/#templates

J'espère que cela t'aides.

Meteor-Router rend cela très simple. Je l'ai utilisé dans certaines applications que j'ai construites avec Telescope comme une bonne référence. Jetez un oeil au routeur Telescope.js

Pour l'utiliser…

mrt add router

Dans client / routeur.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' });

Dans votre modèle …

 <body>{{renderPage}}</body>

J'ai trouvé le même problème. Lorsque le code augmente, il est difficile de garder le code propre.

Voici mon approche de ce problème:

Je séparer les différentes pages html comme je le ferais avec un autre cadre Web. Il existe un index.html où je stocke la page html racine. Et puis, pour chaque grande partie fonctionnelle, je crée un modèle différent et le place dans un autre html. Meteor puis fusionne tous. Enfin, je crée une variable de session appelée operation où je définis ce qu'il faut montrer à chaque fois.

Voici un exemple simple

Index.html

 <head> <title>My app name</title> </head> <body> {{> splash}} {{> user}} {{> debates}} </body>

Puis dans splash.html

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

Alors dans user.html

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

etc …

Dans le code javascript, je vérifie quand imprimer chaque modèle à l'aide de la variable Session, comme ceci:

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

Enfin, le routeur Backbone gère cette variable 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... });

J'espère que ce modèle est utile pour les autres développeurs Meteor.

C'est ma solution hacky au routage: https://gist.github.com/3221138

Mettez simplement le nom de la page comme nom du modèle et accédez à / {nom}