title: BackboneJS - Navigation menu
body: <p>I want to create a fixed positioned navigation menu on top of my page which should show me the different views after clicking the relevant link. I have a index.php file, a mainpage.js file and separate folders for collections, models, views, routers and html-templates. Displaying the menu and the views works so far, just the navigation doesnt work e.g. I dont know how to make it work properly. The navigation bar is supposed to be visible all the time and the #mainContent Div is supposed to display the different views...</p>
  
  <p>my index.php (body part):</p>
  
  <pre><code>&lt;body&gt; 
   &lt;div id="container"&gt;
     &lt;div id="mainMenu"&gt;&lt;/div&gt;
     &lt;div id="mainContent"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script data-main="js/config" src="js/lib/requirejs/require.js"&gt;&lt;/script&gt;
  &lt;script&gt; require(['config'], function(config) {
      require(['app/mainpage']);
  });
  &lt;/script&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>So I've created a MainMenuCollection,json file:</p>
  
  <pre><code>[
  {
      "name":"HOME",
      "id":"1",
      "url":"home"
  },
  {
      "name":"FIRST PAGE",
      "id":"2",
      "url":"firstpage"
  },
  {
      "name":"SECOND PAGE",
      "id":"3",
      "url":"secondpage"
  },
  {
      "name":"THIRD PAGE",
      "id":"4",
      "url":"thirdpage"
  },
  {
      "name":"ABOUT",
      "id":"5",
      "url":"about"
  },
  {
      "name":"CONTACT",
      "id":"6",
      "url":"contact"
  }
  ]
  </code></pre>
  
  <p>My collection file:</p>
  
  <pre><code>define([
    "backbone",
    "models/MainMenuModel"
  ],
  
   function(Backbone, MainMenuModel) {
  var MainMenuCollection = Backbone.Collection.extend({
      model: MainMenuModel,
  
      url: "MainMenuCollection.json"
  });
  
  return MainMenuCollection;
   });
  </code></pre>
  
  <p>My MenuModel:</p>
  
  <pre><code>define([
   "jquery",
   "backbone"
  ],
  
   function($, Backbone) {
  var MainMenuModel = Backbone.Model.extend({
      urlRoot: "/MainMenuCollection.json"
  });
  
  return MainMenuModel;
   });
  </code></pre>
  
  <p>Here is my Menu.html file:</p>
  
  <pre><code>&lt;ul&gt;
  {{#each mainmenu}}
  &lt;li&gt;
      &lt;a href="{{this.url}}"&gt;{{this.name}}&lt;/a&gt;
  &lt;/li&gt;
  {{/each}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>The Menu View itself:</p>
  
  <pre><code>define(['backbone','handlebars', 'text!templates/MainMenu.html'],
  
      function(Backbone,Handlebars, Template) {
  
  
          'use strict';
  
          var MainMenuView = Backbone.View.extend({
  
              template: Handlebars.compile(Template),
  
              events: {
                  'click a':'mainMenu_event'
              },
  
              mainMenu_event: function(e) {
                  var id = $(e.currentTarget).attr('href');
                  Backbone.history.navigate(id, {trigger:true});
              },
  
              initialize: function () {
              },
  
              render: function() {
                  //this.model.toJSON())
                  $(this.el).html(this.template({mainmenu:this.collection.toJSON()}));
                  return this;
              }
  
          });
  
          return MainMenuView;
  
      }
     );
  </code></pre>
  
  <p>and at the end the router:</p>
  
  <pre><code>define([
  'backbone',
  //
  'views/MainMenu',
  'views/Home',
  'views/Firstpage',
  'views/Secondpage',
  'views/Thirdpage',
  'views/About',
  'views/Contact',
  'collections/MainMenuCollection'
  ],
  
  function(
      Backbone,
      MainMenuView,
      HomeView,
      FirstpageView,
      SecondpageView,
      ThirdpageView,
      AboutView,
      ContactView,
      MainMenuCollection
      ) {
  
      'use strict';
  
      var Router = Backbone.Router.extend({
  
          routes: {
              '': 'index',
              'pages/firstpage' : 'firstpage',
              'pages/secondpage' : 'secondpage'
          },
  
          //Initializing the application
          initialize: function () {
              var self = this;
  
              //Collections
              this.mainMenuCollection = new MainMenuCollection();
  
              //Views
              this.mainMenuView = new MainMenuView({el:'#mainMenu', collection:this.mainMenuCollection});
              this.homeView = new HomeView({el:'#mainContent'});
              //this.menuView = new Menu({el:'.menu'});
  
              self.homeView.render();
              //self.gridView.render();
  
              this.mainMenuCollection.fetch({success: function(collection) {
                  self.mainMenuView.collection=collection;
                  self.mainMenuView.render();
              }});
  
  
              Backbone.history.start({
                  pushState: false
              });
  
          },
  
          //Default route.
          index: function () {
              var self = this;
  
          },
  
          firstpage: function() {
              this.firstpageView = new FirstpageView({el:'#mainContent'});
              self.firstpageView.render();
          },
  
          secondpage: function() {
              this.secondpageView = new SecondpageView({el:'#mainContent'});
              self.secondpageView.render();
          }
  
      });
  
      return Router;
  }
    );
  </code></pre>
  
  <p>My issue is, that I don't know how to navigate through the different pages/views, so If anyone could help me out? How do I setup the router? Help would be great! :-)</p>