Dispatches from the Edge: Template Views Part 2

written by Greg Moeck

In the last Dispatch we looked at how SproutCore incorporates the standard handlebars.js expressions and and helpers, and how bindings are automatically set for those expressions. This week, we’re going to take a look at some of the other ways that SproutCore extends handlebars.js to make interaction with the DOM even easier.

Class Bindings

A template needs to do more than tell the browser what content to display it also needs to tell the browser how to display that content. For example, in a to-dos application, we want our template to define what the to-do is, and if it has been completed, but we might also want to specify other aspects of the display. Maybe we want the text to grey out, or have a line through it once the to-do has been completed. How would we do this?

Well, with HTML we can modify the display using CSS. SproutCore has some helpers to make this easy. For example, If I wanted to have a class be added to an element only when a property is true I can use the classBinding helper. Let’s look at a concrete example.
Continue reading

Dispatches from the Edge: Part 1, Template Views

written by Greg Moeck

More and more developers are adopting SproutCore every day, and the need for great documentation and tutorials just keeps growing. The Core Team is also making rapid progress on the new parts of SproutCore—the so-called sexy Edge. We’ve got the fantastic new SproutCore Guides to tackle the mainstream parts of SproutCore, and now, I’m aiming to tackle the new and exciting Edge parts. 

Every other week I’ll be posting what I’ll call Dispatches from the Edge. Each Dispatch will highlight a feature from the most recent release of SproutCore, explain how to use it, and wax on about why it’s so darn cool. Dispatches will also be where the team posts announcements about upcoming SproutCore-related events. Online, offline, we’ve pretty much got it covered 🙂

I’d like for this to be as helpful and interesting as possible, so if there’s something you want to know about, do let me know. Comment, tweet, email—I’ll be listening!

There’s been a lot going on in the world of template views lately, making it an optimal first topic for the Dispatch. One new feature stands out as being particularly exciting… so I’ll start there 🙂

When you create a template for a view, that template is really specifying what the display should look like all the time. Since that’s the case, when one of the properties of the view changes, it would be nice if the view would automatically redraw that section of its display to accomodate the changes in the data. The new template view does just that.

Let’s look at an example:

Dispatches from the Edge Part 1a from SproutCore on Vimeo.

Continue reading