Enabling Knockout.js to work across iframes

If you haven’t checked out Knockout yet, I highly recommend it.

Knockout allows you to create declarative bindings in your HTML that map to your underlying model’s properties. The nice thing about the bindings being in HTML is that you and your designer team can work in real HTML.

But Knockout’s real magic comes from its dependency tracking. When bound model properties change, Knockout magically updates the bound parts of the HTML that need it. It’s an approach I have used many times that gives you the real benefits of MVC by allowing the view to bind to the model rather than the other way around.

We wrote something similar in Digitalk Smalltalk back in the 90s, and then VisualWorks Smalltalk introduced Aspect Adaptors baked right in. In Knockout these model property trackers are called Observers. It also has something called a Dependency Observer that tracks any model properties accessed during a function call (for example getting the list of users), it then automatically creates observers on those properties. Very cool.

One problem with the current version of Knockout is that there are still a few hurdles preventing it from working across frames or windows: it uses a global state to do its Dependency Observer magic, it does identify class checking (which fails across frames), and it does some things relative to the window the code was loaded into rather than the current element’s window. I have written a couple of patches that cover most of these cases and have submitted a pull request to Steve Sanderson.

Update 3/21/12

After many tweaks and discussions my cross-frame changes have been accepted into Knockout 2.10. See issue 405 for details.


About David Rees (@studgeek)


Posted on September 11, 2011, in Code and tagged , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: