Currently I have my main.jade file which is served using Express.js on Node.js. In the head of the jade file, I have all of my templates. As you can probably understand, this got unruly very quickly. I load the templates from Backbone.js using:
My app will have three versions: mobile, tablet, and desktop. I was wondering what the best way to organize my templates should be. I do not want to have ~30 templates listed in the head of my html file. How should I organize my templates? I would prefer to have 3 files somehow, one for each version. I do not want to serve a different URL from node.js/express.js depending on the version.
Problem courtesy of: Sam P
I actually ended up using the 'include' feature of jade.js to do what I needed. I have three .jade files for each version of my app and I include all of them in my main.jade. I am assuming I will ultimately result in using require.js for my project in the future, so thank you for your tips w/ that, eabait.
Solution courtesy of: Sam P
you can separate templates in files (such as phone-tpl.html) and put all of them in a /templates directory. Then you can load each of them through AJAX, in that case I recommend you to have a cache (in memory or localStorage) to minimize request numbers.
Discussion courtesy of: eabait
You could put them into js files and load them with requirejs. That produces quite readable code and reduces dom dependence.
I ended up using Jade templates for everything - server and client side. No underscore templates. I used http://projects.jga.me/clientjade/, which takes jade templates and precompiles them into a single js file. Advantages:
- No templates in your html files. Smaller, more sane markup
- Precompiled jade templates are blazing fast
- Jade files can still be used to render html
- Single template system
clientjade doesn't watch for file changes. So I made a cake task that would handle that. If you go that route, check out my cake task - https://gist.github.com/4041281
This recipe can be found in it's original form on Stack Over Flow.