Search code examples
javascripttemplatesbackbone.jsmiddleman

Where to store HTML templates for use in Backbone.js

I'm currently developing a static site (no backend or server stuff) with Backbone.js and Middleman. The site doesnt have any dynamic content, just plain html code. But it has some transitions between pages and some Javascript effects.

So I want to make use of Backbones Router for the history and want to append the views dynamically to the DOM with Backbone views. So far so good.

Now I was wondering where to store the HTML parts of the site, so that Backbone can use it. With Inline script tags I think it gets too messy, so I want to swap it out in different HTML files. Now I could dynamically load the HTML files via requirejs, but I think it would be better to pack all the HTML stuff in one JS file and load it the first time someone visits the page.

How could something like this be done? Or does anybody have a better solution?

Solution

  • After a lot of researche, I'm doing it this way:

    • Store templates as .jst.ejs in template folder
    • include them with Sprockets
    • use JST to load the templates

    In backbone I use the views class to extend new views and use the templates:

    App.Views.Layout.Logo = Backbone.Views.extend({
  template: JST['templates/layout/logo'],
  el: "#logo",
});