title: Simplest static rendering using backbone.js only for routing
body: <p>I'm trying really hard to wrap my head around Backbone.js with Require.js and Handlebars.js. I'm still not 100% sure what the best combination is but this is what i'm currently using to redo the marketing site at work. </p>
  
  <p>We've added some more pages and as it grows I thought it would be good to put the static site into an MV like Backbone.js. It seems that this would only be a good option if you have dynamic data as templates only seem suited for this typical scenario of looping through data and rendering the DOM elements.</p>
  
  <p>But what if that's even too advanced for your needs and you just want to use the SOC and DRY practices of keeping your code in modules for easier maintenance and not having to put huge blocks of markup in your .html files.</p>
  
  <p>But it seems like every tut just goes over the same telling of the backbone/require.js story. I'm assuming it's because no one uses backbone/require for static sites? I hope I'm wrong, don't people still have a need for something like backbone/require.js even for larger static sites just to make them easier to maintain? It seems like a logical solution.</p>
  
  <p>I'm having the hardest time understanding how to link from one static page to another just using the Router file in Backbone.</p>
  
  <p>Ideally I would like to have a header and footer template that are universal throughout the site and then just have large blocks of code for the content areas of each page, why is this so hard to accomplish with backbone/require and handlebars? </p>
  
  <p>Can anyone give me a simple solution to what doesn't seem like a complicated problem so I don't have to create 17 static pages all repeating the same header and footer.</p>
  
  <p>I think starting with a simpler project like this will help me understand more complicated examples later.</p>
  
  <p>I have included a sample index.html, a sample view, a sample router, config file and app.js file so you can see how i'm trying to pull this together but no matter how I look at this it seems that the only feasible way is to create a bunch of static pages and link them through the Router. If at the end of the day that's all I could accomplish then I'm ok with that.</p>
  
  <p>Thanks.</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;body&gt;  
  
      &lt;div id="container"&gt;
          &lt;!-- BODY WRAPPER --&gt;
          &lt;section class="body-wrapper"&gt;
  
              {{Header Template Here}}
  
  
              {{Body Content Here}}
  
  
              {{Footer Template Here}}
  
  
          &lt;/section&gt;
          &lt;!-- /.body-wrapper --&gt;
  
      &lt;/div&gt;
      &lt;!-- /#container --&gt;
  
      &lt;script data-main="js/config" src="js/libs/require.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>config.js:</p>
  
  <pre><code>// Set the require.js configuration for you application.
  requirejs.config({
    // Initialize the application with the main application file
  
    baseUrl: 'js',
  
    paths:
    {
        jquery          : [
          '//ajax.goolgleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
          'libs/jquery.min'
        ],
        modernizr       : [
          '//cdjns.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min',
          'libs/modernizr'
        ],
        hbs             : '../bower_components/require-handlebars-plugin/hbs',
        underscore      : '../node_modules/underscore/underscore-min',
        backbone        : '../node_modules/backbone/backbone-min',
        handlebars      : '../node_modules/handlebars/handlebars',
        text            : '../node_modules/text/text'
    },
    hbs: {
      helpers: true,
      i18n: false,
      templateExtensions: 'hbs',
      partialsUrl: ''
    },
    shim: {
      'jquery' : {
        exports: '$'
      },
      'underscore': {
        exports: '_'
      },
      'handlebars': {
        exports: 'Handlebars'
      }
    }
  
  });
  
  // Launch the App
  require(['app'],
    function(App){
      App.initialize();
  });
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>define(
    ['jquery','underscore','backbone','router'],
    function($, _, Backbone, Router){
      var initialize = function() {
        Router.initialize();
      }
  
      return {
        initialize: initialize
      };
  });
  </code></pre>
  
  <p>router.js</p>
  
  <pre><code>define(
  
    ['jquery',
     'underscore',
     'backbone',
     'views/HomeView',
     'views/HeaderView',
     'views/FooterView',
     'models/FeatureModel',
     'collections/FeatureCollection'],
  
    function($, _, Backbone, HomeView, HeaderView, FooterView, FeatureModel, FeatureCollection){
  
    var AppRouter = Backbone.Router.extend({
      routes: {
        ''                 : 'home', //#index
        '/feature/:page'   : 'featurePage',
        '*actions'         : 'defaultAction',
        'about'            : 'about', //#about
        '/support'         : 'support', //#support
      }
  
    });
  
    var initialize = function(options) {
  
      var appView = options.appView;
      var router = new AppRouter(options);
  
      router.on('home', function(){
  
        var homeView = new HomeView();
        homeView.render();
      });
  
      router.on('route:defaultAction', function(actions){
  
        var homeView = new HomeView();
        homeView.render();
      });
  
      router.on('support', function(){
  
        var supportView = new SupportView();
        supportView.render();
      });
  
      var headerView = new HeaderView();
  
      var footerView = new FooterView();
  
      Backbone.history.start();
  
    };
    return {
      initialize: initialize
    };
  
  });
  </code></pre>
  
  <p>views/homeView.js</p>
  
  <pre><code>define(
    ['jquery','underscore','backbone' , 'text!/templates/home.html'],
    function($, _, Backbone, homeTemplate){
  
      var HomeView = Backbone.View.extend({
        el      : $('#content'),
        render  : function() {
          this.$el.html(homeTemplate);
        }
  
      });
  
      return HomeView;
  });
  </code></pre>
  
  <p>templates/home.html</p>
  
  <pre><code>Big block of HTML content for the body of the index.html page
  </code></pre>