Programming Social Applications

JavaScript API

Throughout this chapter, we have explored how to work with templates that automatically render during gadget processing. Autorendering is an excellent method for building an extensible structure for your gadget when it first loads, but it does not cover the extent of functionality that you may require when working with templates.

The templating JavaScript API seeks to address this shortcoming, allowing developers to programmatically render a template into the HTML document of a gadget through the JavaScript layer, as needed. This functionality allows the developer to enjoy the rich functionality and feature set of OpenSocial templates while still maintaining a great amount of freedom in her development practices.

Before we dive into the individual methods of the JavaScript API, note that each example assumes you have the following template defined:

<script type="text/os-template"
        tag="gadget:restaurants"
        xmlns:gadget="http://www.mysite.com/gadget">
   <h1>Local Restaurants</h1>
   <ul>
      <li repeat="${restaurants}">
         <b>Name</b>: ${Cur.place}<br />
         <b>Address</b>: ${Cur.address}<br />
         <b>Website</b>: <a href="${Cur.href}">
            ${Cur.href}
         </a>
      </li>
   </ul>
</script>

As well as the following data source for the template:

var restaurants = [ { place: "Lovely Sweets & Snacks", address: "9 32 E El Camino Real, Sunnyvale CA", href: "http://local.yahoo.com/info-21337048-lovely- sweets-snacks-sunnyvale" }, { place: "Vitos Famous Pizza", address: "1155 Reed Ave, Sunnyvale CA" href: "http://local.yahoo.com/info-21332026-vitos- ...