Using Underscore.js Templates To Render HTML Partials
I've never used Underscore.js before. But, we're going to start using some Backbone.js at InVision; and, since Underscore.js is a hard dependency of Backbone.js, we decided to use Underscore's template() method as our client-side HTML partial rendering engine.
_.templateSettings.variable = "rc";
Now, all top-level variable references in our Underscore.js templates have to be referenced off of, "rc."
You can also override the ERB (Embedded Ruby) style markup, if you want to use braces (ala Mustache or Handlebars) instead of angle-brackets. Both approaches kind of look equally funny to me, however, so I just stuck with the defaults.
That said, let's take a look at my fist use of the Underscore.js template engine:
Anyway, that's my first look at Underscore.js and it's template() method. Pretty cool stuff. I can see why people rave about Underscore. It has a boat-load of useful functions.
Want to use code from this post? Check out the license.
I believe that all of the template engines work the same way (more or less) as the micro-templating by Resig. From the ones I've looked at, they use an array behind the scenes, build it up, and then join() it and return the string. I assume they all have roughly the same performance.
Underscore.js allows you to use a scope variable for references; which, is faster than using with(). So, that's a performance boost.
Underscore's boatload of useful functions is exactly why I wrote Underscore.cfc: http://russplaysguitar.github.com/UnderscoreCF/
I didn't implement templating though, since there is already a CF version of Mustache: https://github.com/pmcelhaney/Mustache.cfc
One thing to be aware of is that underscore's template, unlike other (such as Handlebars), does not do any HTML escaping for you. You can do it manually using _.escape. This is obviously important when it comes to preventing cross-sites-scripting vulnerabilities.
Very cool. I'm working on moving to ColdFusion 10; but, I'm waiting for a license to come through (supposedly processing). I know you can probably use this stuff pre-CF10; but, using the function expressions probably makes life much easier!
I think they may have updated it to include escaping. It looks like you have to use a slightly different variation in the ERB notation to allow for escaping:
Notice the use of "-" rather than "=". The docs say that this will HTML escape it.
Wow, you're right, and it's been that way for a while. I guess the stuff I'd read previously about it is just very out of date. Sorry for the misinformation.
Hey Ben! If ya dig Underscore/Backbone you may dig Lo-Dash (http://lodash.com), a drop-in replacement for Underscore that's customizable. If ya only want the `_.template` method you can do `lodash include=template` to create a build with just `_.template`, or if you want to use Lo-Dash with Backbone and a different template lib you can do `lodash backbone` to create a build of Lo-Dash with only the methods used by Backbone. Lo-Dash also has optimizations to automatically avoid with-statements for templates that don't use "evaluate" delimiters and sourceURL's baked into each template to help debug them in development builds.
No problem at all! Since this is my first time looking into it, I had completely fresh eyes. I know how it is - with ColdFusion, I've been through versions 4.5 -> 10. Sometimes, I'll get through 2,3,4 versions without even realizing that a method was added :D
Yeah, take a look at Mustache. It might be a good starting point.
This is good stuff. However, I have yet to find a good example of how to nest templates (templates that call other templates). Any ideas on that?
Thanks for the article!
If you are looking for templates that call other templates you could see Google Closure (https://developers.google.com/closure/). I have working with it and liked to much. However, the bad point is that you need to build it... There is a way to config it on Visual Studio...
This article is really helpful Ben Nadel.
Thanks for this post :)
Nice article. I have indeed got my application to run using partial rendering of views. However i came to a roadblock.
the code works well.
However if i put the template as an external file like
this wont work.
What is the difference between the above two methods and also how can i get around this issue? Or am i missing something here which maybe obvious?
Thanks a lot! Thanks to your example, i was able to create my first template faster than i expected!
Rally thank you for your article, I applied it my webserver http://avtopazl.by/ (in search criterea, and it works really super!!!)
Guys, you do super deal!!!
because I wanted to use asignmet of external templates like :
<script type="text/template" id="templateid" src="template.js"></script>
I build myself another template engine I use :
Ben, what are your views on templating with cook.js (http://cook.relfor.co) ?
i have a added a weather widget from
but, its not rendering perfectly becoz the widget contains a script tag with 'src'. which is not wrking.. can you plz give me an idea to fix this...Thx.