Where to store HTML templates for use in Backbone.js

Question

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?

Answer 1

If you are developing a HTML5 application, then you can use application offline cache to fetch all the necessary HTML files and other resources. It involves writing a cache manifest file.

The following website provides a nice description of the offline feature and writing the manifest file: http://diveintohtml5.info/offline.html .

Answer 2

Personally I seperate all the parts of backbone in different folders. So for the templates I put each and one of them in a seperate files in a template folder. That way while developing everything is clean. I load them by using "text!" functionality in require.js.

When I want to put the project in development I use the optimization part of require.js which minifies and combines all the files for me.

Hope that helped.

Answer 3

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",
});