CODEWITHSUNDEEP
backbone.jsmeteor
Kate Price
Kate Price

Reputation: 25

Meteor using backbone for routing always loading one route

I'd appreciate any insight into whether this is a "correct" way of doing things and also what's causing the error I'm seeing.

I have added backbone to my base meteor install meteor add backbone

Then I set up a router.js file as follows (just showing 2 pages as example);

var Router = Backbone.Router.extend({
  routes: {
    "":                 "index", 
    "help":             "help",  
    ... 
  },

  index: function() {
    Session.set('currentPage', 'homePage');
  },

  login: function() {
    Session.set('currentPage', 'loginPage');
  },

  ...

Then for the pages I have html files with templates looking something like this...

<template name="homepage">
    {{#if route}}
    You're at the Home Page!
    {{/if}}
</template>

Then for the main page I have an html file that contains the following;

<body> 
...
    {{> homepage}}
    {{> loginpage}} 
    {{> helppage}}
...
</body>

This works for all of the pages except the one designated 'homepage', this template is always rendered regardless of where I am on the site. e.g. myapp/ as the root page just displays the homepage template, but myapp/loginpage displays the loginpage template and the homepage template. So every single page displays the contest of the homepage template.

Any insight? (or better ways to structure).

Thank you

Upvotes: 1

Views: 1329

Answers (1)

Pierce
Pierce

Reputation: 325

Finally a question that I can answer because it's what I've been doing 60 hours a week at work for the last few months :-P

You're doing a few things wrong here, and they're extremely simple fixes that will get you fired up in no time.

First thing

You need to instantiate all of your routers and then initialize Backbone.pushState().

// This is just how I have been doing it, there are many correct ways.
var LoadedRouters = {
    Module1 : new Module1Router(),
    Module2 : new Module2Router(),
    ...
};
// After all routes instantiated, we tell Backbone to start listening.
Backbone.history.start({ pushState : true, root : "/" });

It's very important that you set the root property correctly, or else weird things start happening.

Second thing

You HAVE TO list your routers from the most-specific to the least-specific, top-down. The URL structure you outlined above will ALWAYS match the first route and trigger it.

routes : {
    "help/phones/newservice" : HandleNewServiceHelp(),
    "help/phones/oldservice" : HandleOldServiceHelp(),
    "help/phones(/:any)" : HandleAllPhoneHelp(),
    "help(/:any)" : HandleAllHelp(),
    "" : HandleAllUnmatchedRoutes()
};

Backbone.router can be a tricky thing to learn.

Upvotes: 3

Related Questions