Backbone Router not working using boilerplate

Question

Ok, I think this is something simple, however I am being to stupid to see it. Here is my code in backbone using the backbone boilerplate method

require([
  "app",

  // Libs
  "jquery",
  "backbone",

  // Modules
  "modules/example"
],

function(app, $, Backbone, Example) {

  // Defining the application router, you can attach sub routers here.
  var Router = Backbone.Router.extend({
    routes: {
      "": "index",
      "item" : 'item'
    },

    index: function() 
    {
      console.info('Index Function');
      var tutorial = new Example.Views.Tutorial();

      // Attach the tutorial to the DOM
      tutorial.$el.appendTo("#main");

      // Render the tutorial.
      tutorial.render();
    },

    item: function()
    {
        console.info('Item View');
    }
  });

  // Treat the jQuery ready function as the entry point to the application.
  // Inside this function, kick-off all initialization, everything up to this
  // point should be definitions.
  $(function() {
    // Define your master router on the application namespace and trigger all
    // navigation from this instance.
    app.router = new Router();

    // Trigger the initial route and enable HTML5 History API support
    Backbone.history.start({ pushState: true, root: '/reel' });
  });

  // All navigation that is relative should be passed through the navigate
  // method, to be processed by the router.  If the link has a data-bypass
  // attribute, bypass the delegation completely.
  $(document).on("click", "a:not([data-bypass])", function(evt) {
    // Get the anchor href and protcol
    var href = $(this).attr("href");
    var protocol = this.protocol + "//";

    // Ensure the protocol is not part of URL, meaning its relative.
    if (href && href.slice(0, protocol.length) !== protocol &&
        href.indexOf("javascript:") !== 0) {
      // Stop the default event to ensure the link will not cause a page
      // refresh.
      evt.preventDefault();

      // `Backbone.history.navigate` is sufficient for all Routers and will
      // trigger the correct events.  The Router's internal `navigate` method
      // calls this anyways.
      Backbone.history.navigate(href, true);
    }
  });

});

I am running this of a MAMP server and when i type Localhost:8888/reel , I get the example index page that comes with boilerplate. However when I type Localhost:8888/reel/item or Localhost:8888/reel/#item I either get, page can not be found or directed back to my index page.

My question is what am i doing wrong. Do I need to use htaccess? This doesnt seem right. Is there a way using backbone to sort this. Sorry if this is really simple, just cant get my head around it.

score 1 · Accepted Answer · answered Jul 11 '12 at 05:42

the problem may lie with the pushState flag.

With that on the request goes all the way to the server and it sees the full url and responds to it with whatever it would do ...

does it work if you have a

 $(function (){
       setTimeout(navMe, 2000);
 });
 function navMe() {
      backbone.navigate("item");
 }

that way 2 seconds after load it will navigate to item view and you know that its because of the request going to the server and not to backbone.

Backbone Router not working using boilerplate

1 Answers1