¿Cómo creo aplicaciones de varias páginas con Meteor?

I am new to Javascript and just started fiddling around with Meteor out of curiosity. What really surprises me, is that it seems that all HTML content gets combined into a single page.

I suspect there is a way to introduce some handling of URLs directing to special pages. It seems that the "todo" example is capable of doing this via some kind of Router class. Is that the "canonical" way of URL handling?

Assuming I can handle URLs, how would I structure my HTML code to display separate pages? In my case they could each have completely separate sets of data, so no HTML code needs to be shared at all.

preguntado el 31 de julio de 12 a las 13:07

Hmm, these page elaborate on how to use Backbone.Router. It seems the HTML code is structured by wrapping contents in {{#if route}} directives, but that seems a little ... weird ... to me. -

TO ALL VIEWING THIS QUESTION: The current solution is to use Iron-Router. -

5 Respuestas

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

Work has now shifted to Iron Router. Please consider using IR instead of Router on new projects!

Thus, the current "canonical" way to do this is probably to use IronRouter.

respondido 17 nov., 13:23

currently best choice is to investigate Angular y Reaccionar for Meteor. - florentino

@sfiore While support for Angular and React is a cool new addition, those are both soltero-page application frameworks. Unless you're able to pull off server-side rendering within meteor using the Angular or React routers (which I'm not sure is even possible), then these are not viable solutions for multi-page applications. - user456584

As far as I am aware, there is currently no out of the box way to do this.

What I suggest to do, is to use Backbone.js smart package. Backbone.js comes with the push-state Router, and if the user's browser doesn't support that it will fallback to hash urls.

In your meteor app directory type this meteor add backbone.

Then somewhere in your client-side code create a Backbone.js Router like so:

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

Then somewhere in your Handlebars template, you can create a helper that will render a page based on the value set in Session's "currentPage".

You can find more information about backbone.js router here: http://backbonejs.org/#Router

Also relevant information on how to create a Handlebars helper method in Metoer here: http://docs.meteor.com/#templates

Espero que esto ayude.

Respondido 31 Jul 12, 16:07

¿No debería leer eso? meteor add backbone? Apart from that, I will possibly take a look around how to organise my HTML code with loads of if directives ... - marcus riemer

Apologies! Yes it should be meteor add backbone. ¡Gracias! - nsmeta

This is exactly bow I currently do it as well. Good answer. - Adgezaza

You should take a look at my router smart package(github.com/tmeasday/meteor-router) which is based off backbone's but does the wiring up for you (and a bit more). - tom coleman

Meteor-Router makes this really easy. I've been using it in some apps I've been building with Telescope as a good reference. Have a look at Telescope's enrutador.js

To use it…

mrt add router

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

In your template…

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

Respondido 30 Abr '13, 17:04

So Meteor-Router se basa en page-js, que se basa en página.js Node package? And after everything is installed I still get the error: Error: ENOENT, no such file or directory 'C:\Program Files (x86)\Meteor\packages\page-js\page-js\index.js'. Where did it all go wrong? - atbXNUMXker

I've got no idea, sorry - other than that I know Meteor doesn't officially support Windows at the moment. - jon oro

Meteor does support with Tom Wijsman's help, but meteorite does not (that's why I don't really like that "yet-another-packaging" idea). However I can clone meteor-router and page-js from their repositories and create packages in Windows (well, folders and copy repositories' content into them). Any idea who might know? - atbXNUMXker

Figured it out: just npm install page is not enough. I cloned the repo git clone git://github.com/visionmedia/page.js.git y lo copié en el .\Meteor\packages\page-js\page-js - atbXNUMXker

To use this package, we can now use 'code' meteor add iron:router 'code'. No need to use meteorite now. - Tanvi

I found the same problem. When the code gets bigger it is difficult to keep the code clean.

Here goes my approach to this problem:

I separate the different html pages as I would do with another web framework. There is an index.html where I store the root html page. And then for each big functional part I create a different template and place it in one different html. Meteor then merges them all. Finally I create a session variable called operation where I define what to show at each time.

Here goes a simple example

index.html

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

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

luego en splash.html

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

luego en user.html

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

y así ...

In the javascript code then I check when to print each template using the Session variable, like this:

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

Finally the Backbone Router manages this Session variable

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

I hope this pattern is helpful for other Meteor developers.

Respondido el 26 de enero de 13 a las 10:01

This is my hacky solution to routing : https://gist.github.com/3221138

Just put the page name as the template name en navigate to /{name}

Respondido 31 Jul 12, 23:07

Nice idea, but doesn't that allow navigation to random "helper" templates? - marcus riemer

You could prevent that by using an array containing the allowed pages,and else redirect to index. - Lander Van Breda

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.