0

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?

23tux
  • 14,104
  • 15
  • 88
  • 187
  • go through this stack answer http://stackoverflow.com/a/9833462/1557322 – Viral Shah Sep 11 '12 at 06:56
  • thx for your answer. I also had a look on Marionette, but I thought it was kinda overkill for my app. I also forget to mention that I use Middleman for compiling and minifying JS and CSS files. Therefore I thought it would be a good idea to merge all HTML templates with Middleman into one file and only load it once. Or can you tell me how to organise my HTML files? – 23tux Sep 11 '12 at 07:13
  • If you're willing to use something like require.js (AMD module loader) there is a plugin called text! that allows you to define HTML files and pass them into your app. require.js has an optimize feature that will minify all your JS code as well as inline the HTML into that single file I believe. Might be of interest. – jmk2142 Sep 11 '12 at 07:39
  • I heard of requireJS, but I'm using some kind of asset pipeline through Middleman to minify all of the JS and CSS stuff. It would be awesome, if I could hook into this point and also merge and minify all the templates into one JS file. Any idea? – 23tux Sep 11 '12 at 07:55

3 Answers3

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.

Mike Aski
  • 9,180
  • 4
  • 46
  • 63
Dhruv Chandna
  • 571
  • 5
  • 17
  • thx, but I think it don't matches my needs. The app doesn't have to be offline available, I just want to retrieve a single file, where all the html templates are merged together and then, append it dynamically with backbone. So I'm searching for a way to organise and merge the templates. – 23tux Sep 11 '12 at 07:16
1

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.

CodePorter
  • 230
  • 1
  • 3
  • 13
0

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",
});
23tux
  • 14,104
  • 15
  • 88
  • 187
  • Few months past now...How did this approach turn out? – fbynite Mar 19 '13 at 21:52
  • It works, I have the project now in production. I'll have a closer look at the current version of backbone when building my next app, maybe sth has changed. – 23tux Mar 20 '13 at 07:29