Making Facebook controls with KnockoutJS

by edsilverton

I recently discovered KnockoutJS which is a JavaScript library that purports to “Simplify dynamic JavaScript UIs by applying the Model-View-ViewModel (MVVM) pattern”. This was interesting for me because I had experience of using the MVVM pattern in Silverlight apps and found it to be a good way to maintain separation of concerns.

A problem I’d been running into with JavaScript projects was that while being a huge fan of jQuery, it didn’t solve the problem of maintaining a clean logical separation of concerns. I’d tried coming up with my own home-baked (and admittedly relatively half-baked) solutions for this, but KnockoutJS seemed to be the answer I was waiting for.

I thought a good test for it would be to create two proof of concept “controls” (I’ll call them that but I essentially mean reusable encapsulated Html/JS files). The first would be a login control for logging in to Facebook, the second a simple feed control to display the contents of your wall. Both would make use of the Facebook Graph API.

To cut a long story short, here’s the Html page I ended up with to host these simple controls:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title></title>
      <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="js/jquery.tmpl.js"></script>
      <script type="text/javascript" src="js/knockout-1.1.2.js"></script>
      <script type="text/javascript" src="js/knockout.mapping.js"></script>
  </head>
  <body>
    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="js/knockout.fbLoginControl.js"></script>
    <script type="text/javascript" src="js/knockout.fbFeedControl.js"></script>

    <div id="fbLoginControl" data-bind="fbLoginControl: fbLoginControlViewModel"></div>
    <div id="fbFeedControl" data-bind="fbFeedControl: fbFeedControlViewModel"></div>
  </body>
</html>

I’ve wrapped all of this into a zip that you can download here. I’ve included the JS libraries instead of linking to the relevant CDN-hosted files because perhaps the hardest aspect of this experiment was getting the correct combination of script versions.

For it to work you need to open js/config.js and enter your Graph API key. You also need to make sure that the Web Site/Site Url property of your Facebook app is correctly set. Make sure you remember to include a trailing “/” at the end of the Url.

Rather than write a lengthy explanation of how it all works I’ll rely on your own powers of deduction as it’s not rocket science. And anyway, the documentation on the KnockoutJS site is exemplary. Please feel free to ask questions in the comments. :-)

One caveat: It works great in Chrome, Firefox and IE6, but there’s something going wrong in IE9 Beta.

download zip

About these ads