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

Soy nuevo en Javascript y comencé a jugar con Meteor por curiosidad. Lo que realmente me sorprende es que parece que todo el contenido HTML se combina en una sola página.

Sospecho que hay una forma de introducir algún tipo de manejo de URL que dirijan a páginas especiales. Parece que el ejemplo "todo" es capaz de hacer esto a través de algún tipo de Router clase. ¿Es esa la forma "canónica" de manejo de URL?

Suponiendo que puedo manejar URL, ¿cómo estructuraría mi código HTML para mostrar páginas separadas? En mi caso, cada uno podría tener conjuntos de datos completamente separados, por lo que no es necesario compartir ningún código HTML.

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

Deberías echarle un vistazo a esto: stackoverflow.com/questions/11461097/… stackoverflow.com/questions/11501312/default-error-page/… -

Hmm, esta página explica cómo usar Backbone.Router. Parece que el código HTML está estructurado envolviendo contenidos en {{#if route}} directivas, pero eso me parece un poco... raro... -

A TODOS LOS QUE VEAN ESTA PREGUNTA: La solución actual es usar Iron-Router. -

5 Respuestas

La respuesta de Jon Gold solía ser correcta, pero a partir de Meteoro 0.5.4:

Ahora el trabajo se ha trasladado a Iron Router. ¡Considere usar IR en lugar de Router en nuevos proyectos!

Por lo tanto, la forma "canónica" actual de hacer esto es probablemente usar Enrutador de hierro.

respondido 17 nov., 13:23

actualmente la mejor opción es investigar Angular y Reaccionar para meteorito. - florentino

@sfiore Si bien el soporte para Angular y React es una nueva adición genial, ambos son solteromarcos de aplicación de página. A menos que pueda realizar la representación del lado del servidor dentro de Meteor usando los enrutadores Angular o React (que no estoy seguro de que sea posible), entonces estas no son soluciones viables para aplicaciones de varias páginas. - user456584

Hasta donde yo sé, actualmente no hay una forma lista para usar de hacer esto.

Lo que sugiero hacer es usar el paquete inteligente Backbone.js. Backbone.js viene con el enrutador push-state, y si el navegador del usuario no lo admite, recurrirá a las direcciones URL hash.

En el directorio de tu aplicación de meteoritos, escribe esto meteor add backbone.

Luego, en algún lugar de su código del lado del cliente, cree un enrutador Backbone.js así:

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

Luego, en algún lugar de su plantilla de manubrios, puede crear un asistente que representará una página basada en el valor establecido en la "página actual" de la sesión.

Puede encontrar más información sobre el enrutador backbone.js aquí: http://backbonejs.org/#Router

También información relevante sobre cómo crear un método auxiliar de Handlebars en Metoer aquí: http://docs.meteor.com/#templates

Espero que esto ayude.

Respondido 31 Jul 12, 16:07

¿No debería leer eso? meteor add backbone? Aparte de eso, posiblemente echaré un vistazo a cómo organizar mi código HTML con un montón de directivas if... - marcus riemer

¡Disculpas! si deberia ser meteor add backbone. ¡Gracias! - nsmeta

Esto es exactamente arco, actualmente también lo hago. Buena respuesta. - Adgezaza

Debería echar un vistazo al paquete inteligente de mi enrutador (github.com/tmeasday/meteor-router) que se basa en la red troncal pero hace el cableado por usted (y un poco más). - tom coleman

Meteor-Router hace que esto sea realmente fácil. Lo he estado usando en algunas aplicaciones que he estado creando con Telescope como una buena referencia. Echa un vistazo a Telescope enrutador.js

Para usarlo…

mrt add router

En cliente/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'
});

En tu plantilla...

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

Respondido 30 Abr '13, 17:04

So Meteor-Router se basa en página-js, que se basa en página.js ¿Paquete de nodos? Y después de que todo está instalado, sigo recibiendo el error: Error: ENOENT, no such file or directory 'C:\Program Files (x86)\Meteor\packages\page-js\page-js\index.js'. ¿Donde empezó a ir todo mal? - atbXNUMXker

No tengo idea, lo siento, aparte de eso, sé que Meteor no es oficialmente compatible con Windows en este momento. - jon oro

Meteor es compatible con La ayuda de Tom Wijsman, pero el meteorito no (es por eso que no me gusta mucho la idea de "otro paquete más"). Sin embargo, puedo clonar meteor-router y page-js desde sus repositorios y crear paquetes en Windows (bueno, carpetas y copiar el contenido de los repositorios en ellos). ¿Alguna idea de quién podría saberlo? - atbXNUMXker

Lo descubrí: solo npm install page no es suficiente. Cloné el repositorio git clone git://github.com/visionmedia/page.js.git y lo copié en el .\Meteor\packages\page-js\page-js - atbXNUMXker

Para usar este paquete, ahora podemos usar 'code' meteor add iron:router 'code'. No hay necesidad de usar meteorito ahora. - Tanvi

Encontré el mismo problema. Cuando el código crece, es difícil mantenerlo limpio.

Aquí va mi enfoque a este problema:

Separo las diferentes páginas html como lo haría con otro marco web. Hay un index.html donde almaceno la página html raíz. Y luego, para cada gran parte funcional, creo una plantilla diferente y la coloco en un html diferente. Meteor luego los fusiona a todos. Finalmente creo una variable de sesión llamada operation donde defino qué mostrar en cada momento.

Aquí va un ejemplo simple

index.html

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

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

luego en salpicadura.html

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

luego en usuario.html

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

y así ...

En el código de javascript, verifico cuándo imprimir cada plantilla usando la variable Sesión, así:

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

Finalmente, el enrutador de red troncal administra esta variable de sesión

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

Espero que este patrón sea útil para otros desarrolladores de Meteor.

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

Esta es mi solución hacky para el enrutamiento: https://gist.github.com/3221138

Simplemente coloque el nombre de la página como el nombre de la plantilla y navegue hasta /{name}

Respondido 31 Jul 12, 23:07

Buena idea, pero ¿eso no permite la navegación a plantillas de "ayuda" aleatorias? - marcus riemer

Puede evitar eso usando una matriz que contenga las páginas permitidas y, de lo contrario, redirigir al índice. - Lander Van Breda

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