title: Backbone Router not working using boilerplate
body: <p>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</p>
  
  <pre><code>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 &amp;&amp; href.slice(0, protocol.length) !== protocol &amp;&amp;
          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);
      }
    });
  
  });
  </code></pre>
  
  <p>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. </p>
  
  <p>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.</p>