Category Archives: Underscore.JS

jQuery 1.5 Deferreds

Eric Hynds on his blog the other day gave a very good run down of jQuery 1.5 Deferreds. From the post:

Deferreds, new in jQuery 1.5, decouple logic dependent on the outcome of a task from the task itself. They’re nothing new to the JavaScript scene; Mochikit and Dojo have implemented them for some time, but with Julian Aubourg’s AJAX rewrite landing in 1.5, deferreds in jQuery was the logical next step. With deferreds, multiple callbacks can be bound to a task’s outcome, and any of these callbacks can be bound even after the task is complete. The task in question may be asynchronous, but not necessarily.

Continue reading

Underscore.js Templates

After the post about why Underscore.js, I think it is best to follow up on one of the best parts of the library. Now, I haven’t had a chance to go through the new templating in jQuery, however what I have found with Underscore.js has allowed me to complete some very complicated tasks in my day to day work.

Lets take a look at the documentation for _.template and then we will dig into it a bit more:

template_.template(templateString, [context])
Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate variables, using

<%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. When you evaluate a template function, pass in a context object that has properties corresponding to the template’s free variables. If you’re writing a one-off, you can pass the context object as the second parameter to template in order to render immediately instead of returning a template function.


var compiled = _.template("hello: < %= name %>");
compiled({name : 'moe'});
=> "hello: moe"
var list = "< % _.each(people, function(name) { %>
<li>< %= name %></li>

< % }); %>";

_.template(list, {people : ['moe', 'curly', 'larry']});
=> "
<li>moe</li>
<li>curly</li>
<li>larry</li>
"

Pasted from <http://documentcloud.github.com/underscore/>

So what can we do with this? Lets take a look at showing some employee data:

Continue reading

Underscore.js

Coming from a more technical backend role, and moving into JavaScript many people tend to look for very common functions to make their life easier. However, since JavaScript is considered a “functional” programming language, most of those little conveniences are currently unsupported. So I went searching a bit. Turns out there is a nice little utility belt library that gives us access to all of those built-in methods we all take for granted and are about to be supported in ECMAScript 5.

As the guys over at Underscore.js put it:

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery‘s tux.

Underscore.js uses the built in functions if they exist, and if they don’t falls back to its own version. Since there are only a few browsers that currently support ECMAScript 5, it allows us to use these functions even on older browsers.  Now, not only can we start using those constructs before they are officially supported in the browsers, but as soon as they become available underscore.js will get out of the way.

Continue reading