Wrapping localStorage and other POJOs with Ember.Object

While working in Ember.Object land, you benefit from all the binding and computed property magic EmberJS has to offer. But what to do when you have to step outside its doors?

It's actually fairly easy to wrap any JavaScript object using Ember.Object. You just have to make sure that all manipulations to the wrapped object are going through the wrapper, e.g. using object.set(attribute, value) instead of object[attribute] = value.

So, how about wrapping localStorage, so you can bind to its properties from other objects? Here's an example:

Ember Starter Kit

You can find the Source Code in the JavaScript tab. In essence, the wrapper uses the unknownProperty and setUnknownProperty methods to sync the Ember.Object's attributes with the ones of the native object. That's pretty much all there is to it.

If you have trouble finding the templates, they are in the HTML tab.

Here's a Gist if you prefer to view it that way.