Projects Technology Web

A Super-Charged Version of ICanHaz.js

I’ve been working on Rembly, which uses Spine.js as the core piece that ties all the functionality together.  I decided to use Mustache.js for my HTML templates.  And finally, I chose ICanHaz.js as a simple and lightweight way of managing my HTML templates.

Although ICanHaz.js is a great start, managing my HTML templates became unwieldy because I started having little templates everywhere.  Each part of a page that is dynamically updated needs to be broken out into its own template.  When you’ve broken a web page into small parts, it’s hard to keep track of what it looks like when put back together.  It also becomes hard to create the correct CSS styles when you lose track of the HTML hierarchy.

This lead me to enhance ICanHaz.js with a ton of new features.  The primary one being nested templates, which allowed me to keep my full HTML page template in tact, while designating specific HTML tags as “sub templates” or partials. You can also specify additional templates to load and replace script “include” tags with the loaded HTML.

Check out my fork on Github for more information about how to use my enhanced version if ICanHaz.js. Make sure to look at the javascript comments for details. And let me know what you think.

4 replies on “A Super-Charged Version of ICanHaz.js”

Oh boy can’t wait to have a look!

Just out of curiosity did you by any chance do away with partials and allow any template to be embedded?

I read the JS comments and I kind of get it… but I’m still a bit confused. It would help if there was some usage demos for each feature that you added.

Hi Tim,

You’re right, some demos would help show how to use the enhancements in the real world. However, I haven’t used this in a while and actually use Handlebars.js instead. The primary benefits of the updates I made to ICanHaz.js were in nesting templates, and dynamically loading nested templates.

I’ve opted to use Handlebars.js to compile HTML templates into JavaScript functions so that everything can be downloaded in one file rather than linking to multiple JavaScript files.


Leave a Reply