Implementing SproutCore-like bindings in a JavaScript Web application

Question

I've done the SproutCore tutorial and have an idea of what the framework has to offer. It seems amazing, although I'm not sure how I feel about a framework which generates the HTML and CSS behind the scenes. The thing about SproutCore which I find most appealing is its bindings – reducing the amount of glue code required to keep everything in sync can only be a good thing.

I'm interested in learning about how SproutCore's bindings are implemented. I would love to be able to take advantage of bindings without necessarily using a framework such as SproutCore.

How would one go about writing the JavaScript code necessary to bind data and their representations, to have views instantly reflect changes to the data without any glue code?

Answer 1

With SproutCore using the 'get' and 'set' methods provided by the SC.Observable mixin enables key-value observing. When you create a binding it basically sets up an observer that fires when the 'set' method is called on the value it's observing and then propagates the change. When a binding is tied to a view on your page, the binding invokes the necessary view code to make the changes to the DOM. You could take a look at API docs and source for SC.Observable and SC.Binding over at http://docs.sproutcore.com.

Since SproutCore is divided into multiple "frameworks", you could just take the framework where this core stuff lives, called 'runtime', and use it in your project without all of the data store and view layers that you don't want. You could also try to reproduce this functionality yourself, but I wonder if you'd end up having to reproduce much of what they've created.