Comment puis-je créer des multi-applications de page avec Meteor?

Je suis nouveau sur le Javascript et juste commencé à bidouiller avec le Météore de la curiosité. Vraiment ce qui me surprend, c'est qu'il semble que tout le contenu HTML obtient combinés en une seule page.

Je soupçonne qu'il ya un moyen d'introduire de la gestion des Url diriger vers des pages spéciales. Il semble que la "todo" exemple est capable de le faire via une sorte de Router classe. C'est que le "canonique" mode de gestion des URL?

En supposant que je peux gérer les Url, comment aurais-je de la structure de mon code HTML permettant d'afficher des pages distinctes? Dans mon cas, ils peuvent avoir chacun complètement différents ensembles de données, donc pas de code HTML doit être partagée par tous.

InformationsquelleAutor Marcus Riemer | 2012-07-31
  1. 30

    Jon Or de réponse utilisé pour être correct, mais comme de Meteor 0.5.4:

    Travail a maintenant changé de Fer Routeur. Veuillez prendre en considération IR au lieu de Routeur sur de nouveaux projets!

    Ainsi, l'actuel "canonique" façon de le faire est probablement d'utiliser IronRouter.

    • actuellement, le meilleur choix est d'enquêter sur les Angulaire et Réagir pour Meteor.
    • Alors que le soutien Angulaire et de Réagir est nouveau cool outre, ceux qui sont à la fois unique-la page de l'application des cadres. Sauf si vous êtes en mesure de retirer de rendu côté serveur dans météore à l'aide de l'angle ou de Réagir routeurs (dont je ne suis pas sûr, c'est encore possible), alors ce ne sont pas des solutions viables pour le multi-applications de page.
    InformationsquelleAutor user456584
  2. 29

    Autant que je sache, il n'existe pas actuellement de la boîte de façon à ce faire.

    Ce que je suggère de faire, est d'utiliser Backbone.js smart package.
    Backbone.js vient avec le push-etat du Routeur, et si le navigateur de l'utilisateur ne supporte pas qu'il se replie sur de hachage url.

    Dans votre application de météore répertoire de ce type meteor add backbone.

    Puis, quelque part dans votre code côté client créer un Backbone.js Routeur comme suit:

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

    Puis, quelque part dans votre Guidon modèle, vous pouvez créer un helper qui va effectuer le rendu d'une page en fonction de la valeur définie dans la Session "currentPage".

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

    Également des informations pertinentes sur la façon de créer un Guidon helper dans Metoer ici: http://docs.meteor.com/#templates

    Espère que cette aide.

    • Ne pourrait-il pas lire meteor add backbone? En dehors de cela, je vais probablement prendre un coup d'oeil autour de la façon d'organiser mon code HTML avec des charges de si les directives ...
    • Toutes mes excuses! Oui il devrait être meteor add backbone. Merci!!!!
    • C'est exactement bow je suis actuellement faire ainsi. La bonne réponse.
    • Vous devriez jeter un oeil à mon routeur smart package(github.com/tmeasday/meteor-router) qui est basée sur la charpente du corps, mais ne le câblage en place pour vous (et un peu plus).
    • oui mais alors comment nouer des vues de routes?
    InformationsquelleAutor nsmeta
  3. 26

    Meteor-Routeur fait vraiment facilement. Je l'ai utilisé dans certaines applications j'ai été la construction avec le Télescope comme une bonne référence. Jetez un oeil au Télescope router.js

    À 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>
    • Semble bon, sera certainement envisager. Merci
    • Donc Meteor-Routeur s'appuie sur page-js, qui s'appuie sur page.js Node package? Et une fois que tout est installé, je reçois toujours le message d'erreur: Error: ENOENT, no such file or directory 'C:\Program Files (x86)\Meteor\packages\page-js\page-js\index.js'. Où s'est-il passé?
    • J'en ai aucune idée, désolé, que je ne sais Meteor n'est pas officiellement en charge de Windows pour le moment.
    • Meteor prend en charge avec Tom Wijsman l'aide de, mais la météorite n'a pas (c'est pourquoi je ne suis pas vraiment comme ça "encore un autre emballage" idée). Cependant, je peux cloner meteor-routeur et page-js à partir de leurs dépôts et de créer des packages dans Windows (bien, dossiers et copier des référentiels de contenu en eux). Une idée de qui pourrait le savoir?
    • Compris: il suffit de npm install page n'est pas assez. J'ai cloné le repo git clone git://github.com/visionmedia/page.js.git et copié dans le .\Meteor\packages\page-js\page-js
    • "0.5.4 est le dernier (sans correction) communiqué de routeur. Travail a maintenant changé de Fer Routeur. "
    • Pour utiliser ce package, nous pouvons maintenant utiliser le terme "code" météore ajouter de fer:routeur "code". Pas besoin d'utiliser la météorite maintenant.

    InformationsquelleAutor Jon Gold
  4. 10

    J'ai trouvé le même problème. Lorsque le code est plus grand, il est difficile d'avoir un code propre.

    Voici ma solution à ce problème:

    J'ai séparé les différentes pages html comme je le ferais avec un autre framework web. Il y a un index.html où je stocke la racine de la page html. Et puis, pour chaque grande partie fonctionnelle-je créer un autre modèle et de le placer dans un autre html. Meteor fusionne ensuite. Enfin, j'ai créer une variable de session appelé operation où j'définir ce que pour 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>

    puis dans user.html

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

    et ainsi de suite ...

    Dans le code javascript puis-je vérifier lors de l'impression de chaque modèle à l'aide de la variable de Session, comme ceci:

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

    Enfin l'épine Dorsale Routeur 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 Meteor.

    InformationsquelleAutor Carlos Barcelona
  5. 7

    C'est mon hacky solution de routage :
    https://gist.github.com/3221138

    Viens de mettre le nom de la page que le nom du modèle de fr accédez à /{nom}

    • Bonne idée, mais ne pas qui facilitent la navigation aléatoire "helper" modèles?
    • Vous pourriez éviter cela en utilisant un tableau contenant les permis de pages,et d'autre rediriger vers l'index.
    • angularjs peut maintenant être utilisé pour ça, non?
    InformationsquelleAutor Lander Van Breda