Best IT Recipes

How to create multi-page applications using Meteor?

I am new to Javascript and just started doing Meteor out of curiosity. What really surprises me is that all the HTML content is combined into one page.

I suspect there is a way to introduce some processing of URLs directing special pages. It seems that the "todo" example is able to do this through some kind of Router class. Is this a "canonical" way of handling URLs?

Assuming I can handle the URLs, how would I structure my HTML code to display individual pages? In my case, they could have completely separate data sets, so the HTML code should not be shared at all.

+55
javascript url-routing meteor
Jul 31 '12 at 12:44
source share
5 answers

Jon Gold's answer was correct, but from Meteor 0.5.4 :

Now work has switched to Iron Router. Please consider using IR instead of Router in new projects!

Thus, the current “canonical” way of doing this is likely to use IronRouter .

+30
Nov 17 '13 at 23:39
source share
— -

To my knowledge, there is currently no way to do this.

What I propose to do is use the Backbone.js smart package. Backbone.js comes with a push-state router, and if the user's browser does not support it, it will refuse the hash addresses.

In the directory of your meteor application, enter meteor add backbone .

Then somewhere in your client code, create a Backbone.js Router like this:

 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 display the page based on the value specified in the Session "currentPage".

More information about backbone.js router can be found here: http://backbonejs.org/#Router

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

Hope this helps.

+29
Jul 31 '12 at 13:40
source share

Meteor-Router makes this very easy. I used it in some applications that I built using Telescope as a good reference. Look at the telescope router.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>
+26
Feb 02 '13 at 14:15
source share

I found the same problem. When the code gets bigger, it's hard to keep the code clean.

Here is my approach to this problem:

I share different html pages as I would with a different web map. There is index.html where I store the html root page. And then for each large functional part I create a different template and put it in one different html. The meteor then unites them all. Finally, I create a session variable called operation , where I determine what to show each time.

Here is a simple example

index.html

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

then in splash.html

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

then in user.html

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

etc.

In javascript code, I check when to print each template using the Session variable, for example:

 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 diagram is useful for other Meteor developers.

+10
Jan 26 '13 at 10:38
source share

This is my hacking solution for routing: https://gist.github.com/3221138

Just enter the page name as the template name en to go to / {name}

+7
Jul 31 '12 at 10:21
source share


More articles:


All Articles