How to load an HTML template from a tpl.js file using Require.js

Question

First I'm not sure if Backbone is the library that I should be using so please note that.

I'm building a static content site that's composed of about 17 pages.

The first question you may be wondering is: Why use Backbone if there isn't any dynamic content on the site?

The only good answer I have to that is there still are some repeatable elements of the of page like Footer and some that may have only changes in things like the "title" as in the case of a Header. So I would like to practice DRY principles in this regard.

Also I want to learn Backbone so to me this is a soft step in the right direction of putting it all together in my head.

I want to use handlebars for templating but haven't found one good tutorial on how to call a template {{Footer}} inside of my index.html file that is being called from some other external.js file.

In other words I want my templates in individual .js files and be able to call them into my index.html file and I can't find a good way to do that.

Any suggestions just based on my Footer example, as I think I could figure it out from there.

Thank you.

UPDATE:

Here is what I would ideally like my index page to look like:

Index.html where I'm trying to pull MainView which has HeaderView and FooterView as partials inside of it.



    
        
        

            
                
                    {{> header}}
                
            


            
                {{> home-content}}
            


            
                {{> footer}}

HomeContentView: views/homeContentView.js

define(
  ['jquery','underscore','backbone' , 'text!/templates/main.tpl.html' 'text!/templates/home-content.tpl.html'],
  function($, _, Backbone, mainTemplate, homeContentTemplate){

    handlebars.registerPartial('home-content' , homeContentTemplate);

    var template = handlebars.compile()

    var HomeContentView = Backbone.View.extend({
      el      : $('#content'),
      render  : function() {
        this.$el.html(homeContentTemplate);
      }

    });

    return HomeView;
});

Header partials: views/headerView.js

define(
  ['jquery' , 'underscore' , 'backbone' , 'handlebars' , 'text!/templates/main.tpl.html' , 'text!/templates/header.tpl.html'],

  function($, _, Backbone, Handlebars, mainTemplate, headerTemplate){

    handlebars.registerPartial('header' , headerTemplate);

    var template = handlebars.compile()

   var HeaderView = Backbone.View.extend({
      el      : $('#header'),
      render  : function() {
        this.$el.append(headerTemplate);
      }

    });

    return HeaderView;
});

Footer view: views/footerView.js

define(
  ['jquery','underscore','backbone' , 'text!/templates/main.tpl.html' , 'text!/templates/footer.tpl.html'],
  function($, _, Backbone, mainTemplate, footerTemplate){

    handlebars.registerPartial('footer' , footerTemplate);

    var template = handlebars.compile()

    var FooterView = Backbone.View.extend({
      el      : $('#footer'),

      render  : function() {
        this.$el.html(footerTemplate);
      }

    });

    return FooterView;
});

Main View that holds Header and Footer partials: views/mainView.js

define(
  ['jquery','underscore','backbone' , 'index.html' 'text!/templates/main.tpl.html'],
  function($, _, Backbone, homeTemplate, mainTemplate){

    handlebars.registerPartial('main' , mainTemplate);

    var template = handlebars.compile()

    var MainView = Backbone.View.extend({
      el      : $('.home-content'),

      render  : function() {
        this.$el.html(mainTemplate);
      }

    });

    return MainView;
});

Router.js

define(

  ['jquery',
   'underscore',
   'backbone',
   'views/MainView'
   'views/HomeContentView',
   'views/HeaderView',
   'views/FooterView',
   'models/FeatureModel',
   'collections/FeatureCollection'],

  function($, _, Backbone, MainView, HomeConentView, HeaderView, FooterView, FeatureModel, FeatureCollection){

  var AppRouter = Backbone.Router.extend({
    routes: {
      ''                 : 'home', //#index
      '/feature/:page'   : 'featurePage',
      '*actions'         : 'defaultAction'
    }

  });

  var initialize = function(options) {

    var appView = options.appView;
    var router = new AppRouter(options);

    router.on('home', function(){

      var mainView = new MainView();
      mainView.render();
    });

    router.on('route:defaultAction', function(actions){

      var homeContentView = new HomeContentView();
      homeContentView.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
  };

});

How to load an HTML template from a tpl.js file using Require.js

Answers (1)

Related Questions