web-dev-qa-db-fra.com

Comment créer des applications multipages avec Meteor?

Je suis nouveau sur Javascript et je viens de commencer à 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 gestion des URL redirigeant vers des pages spéciales. Il semble que l'exemple "todo" soit capable de le faire via une sorte de classe Router. Est-ce la manière "canonique" de gérer les URL?

En supposant que je puisse gérer les URL, comment structurer mon code HTML pour afficher des pages distinctes? Dans mon cas, ils pourraient chacun avoir des ensembles de données complètement séparés, donc aucun code HTML ne doit être partagé du tout.

javascripturl-routingmeteor
55
Marcus Riemer

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

Le travail est maintenant passé à Iron Router. Veuillez envisager d'utiliser l'IR au lieu du routeur sur de nouveaux projets!

Ainsi, la manière "canonique" actuelle de le faire est probablement d'utiliser IronRouter .

30
user456584

Pour autant que je sache, il n'y a actuellement aucun moyen prêt à l'emploi de le faire.

Ce que je suggère de faire, c'est d'utiliser le package intelligent Backbone.js. Backbone.js est fourni avec le routeur push-state, et si le navigateur de l'utilisateur ne le prend pas en charge, il se rabattra sur les URL de hachage.

Dans le répertoire de votre application Meteor, tapez ceci meteor add backbone.

Ensuite, quelque part dans votre code côté client, créez un routeur Backbone.js comme ceci:

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 de guidon, vous pouvez créer un assistant qui restituera une page en fonction de la valeur définie dans la "currentPage" de la session.

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

Des informations pertinentes sur la façon de créer une méthode d'assistance de guidon dans Metoer ici: http://docs.meteor.com/#templates

J'espère que cela t'aides.

29
nsmeta

Meteor-Router rend cela très facile. Je l'ai utilisé dans certaines applications que j'ai construites avec Telescope comme bonne référence. Jetez un œil au télescope router.js

Pour l'utiliser…

mrt add router

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

Dans votre modèle…

<body>{{renderPage}}</body>
26
Jon Gold

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

Voici mon approche de ce problème:

Je sépare les différentes pages html comme je le ferais avec un autre framework web. Il y a un index.html où je stocke la page racine html. Et puis pour chaque grande partie fonctionnelle, je crée un modèle différent et le place dans un html différent. Meteor les fusionne ensuite tous. Enfin, je crée une variable de session appelée operation où je définis quoi afficher à 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>

puis dans ser.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 en utilisant la variable Session, comme ceci:

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

Enfin, le Backbone Router gère cette variable de 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 de Meteor.

10
Carlos Barcelona

Ceci est ma solution hacky pour le routage: https://Gist.github.com/3221138

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

7
Lander Van Breda