A Super-Charged Version of ICanHaz.js

Blueprint

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.

Share

Tags: , , , ,

4 comments

  1. 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?

  2. You can still use partials if you want to. Either is supported.

  3. 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.

  4. 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.

    ~Joel

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − = four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType