OpenSocial Templates

OpenSocial0.9提供了一种激动人心的数据动态显示的方法OpenSocial Templates。如果所有脚本技术(如PHP，JSP)一样，你可以将模板标签书写在HTML中，在页面Render的时候通过数据对象替换，而无需在JavaScript中用字符串装配你的数据内容和控制显示效果的HTML标签。

以这样一个数据对象song为例：

var song = { title: 'Love song #15',
   url: 'http://allmusic.com/johndoe/greatesthits/lovesong15.mp3',
   artist: 'John Doe',
   album: 'Greatest Hits',
   albumThumbnail: 'http://allmusic.com/johndoe/greatesthits.jpg' }

过去，你需要这样在DIV中显示这个数据对象：

document.getElementById('outputDiv').innerHTML = '<a href="' + song.url 
    + ' "><img src="' + song.albumThumbnail + '"> ' 
    + song.title + ' BY ' + song.artist + ' FROM ALBUM ' + song.album +'</a>';

现在，你只需要这样：

<script type="text/os-template"> 
  <a href="${url}"> 
    <img src="${albumThumbnail}"/>   ${title} BY ${artist} FROM ALBUM ${album}
  </a> 
</script>

清晰，可以重用的HTML标签足够让你眼前一亮吧，是的，更激动的是，你可以使用Web设计工具直接制作各种效果了，在Dreamweaver中编辑好样式，将HTML代码直接复制到<script type="text/os-template">标签中。在这个标签中定义的，就是OpenSocial Templates，你可以在其中使用基本的HTML标签，如例子中的a、img。你还可以按照JavaScript的方式，在${}中使用表达式。

要使用Opensocial Templates，你需要在gadget中引用opensocial-data和opensocial-templates模块。看下面这个完整的例子：

<?xml version="1.0" encoding="UTF-8"?> 
  <Module> 
    <ModulePrefs title="Song List"> 
      <Require feature="opensocial-data" /> 
      <Require feature="opensocial-templates"> 
    </Require> 
  </ModulePrefs> 
  <Content type="html"> <![CDATA[ 
      <script type="text/os-data" xmlns:os="http://ns.opensocial.org/2008/markup"> 
        <os:HttpRequest key="song" href="http://mysongserver.com"/>
      </script>   
      <script type="text/os-template" require="song">
        <a href="${song.url}">
          <img src="${song.albumThumbnail}"/> ${song.title} BY ${song.artist} FROM ALBUM ${song.album} 
        </a>
      </script>
    ]]> </Content> 
</Module>

在这个例子中，song对象通过HttpRequest从http://mysongserver.com处获取，然后通过os-template显示。song对象需要在os-template的标签中通过require属性引入。在模板中，便可以使用song对象的属性构成表达式。

如果我们有一个对象数组，songs：

songs : [ { title: 'Love song #15',
         url: 'http://allmusic.com/johndoe/greatesthits/lovesong15.mp3',
         artist: 'John Doe',
         album: 'Greatest Hits',
         albumThumbnail: 'http://allmusic.com/johndoe/greatesthits.jpg' },
       { title: 'Love song #16',
         url: 'http://allmusic.com/janedoe/greatesthits/lovesong16.mp3',
         artist: 'Jane Doe',
         album: 'Best Of',
         albumThumbnail: 'http://allmusic.com/janedoe/bestof.jpg' },
       { title: 'Single #1',
         url: 'http://allmusic.com/janedoe/greatesthits/single1.mp3',
         artist: 'Jane Doe',
         album: 'Greatest Hits',
         albumThumbnail: 'http://allmusic.com/janedoe/greatesthits.jpg' }, ]

我们可以使用repeat属性去循环模板标签，遍历这个数组，如下，<li>标签会被循环。

<script type="text/os-template" require="songs"> 
  <ul> 
    <li repeat="${songs}"> 
      <a href="${url}"> 
        <img src="${albumThumbnail}"/> ${title} BY ${artist} FROM ALBUM ${album} 
      </a> 
    </li> 
  </ul> 
</script>

你还可以使用条件表达式，配合循环来实现数据的筛选：

<script type="text/os-template" require="songs"> 
  <ul> 
    <li repeat="${songs}"> 
      <span if="${album == 'Greatest Hits'}"> 
        <a href="${url}"> 
        <img src="${albumThumbnail}"/> ${title} BY ${artist} FROM ALBUM ${album} 
        </a> 
      </span> 
    </li> 
  </ul> 
</script>

只有album为"Greatest Hits"的song会被显示。

写到这里你会发现，虽然服务器端的模板语言已经再熟悉不过了，但在JavaScript中使用模板技术却是个新鲜而又快乐的事情。看上去这和OpenSocial无关，那么看看下面的例子，通过Template来显示OpenSocial容器中的对象。

<?xml version="1.0" encoding="UTF-8"?> 
<Module> 
  <ModulePrefs title="Server-side Template">
    <Require feature="opensocial-data" /> 
    <Require feature="opensocial-templates" /> 
</ModulePrefs> 
  <Content type="html"> <![CDATA[ 
    <script xmlns:os="http://ns.opensocial.org/2008/markup" type="text/os-data">
      <os:PeopleRequest key="friends" userId="@viewer" groupId="@friends"/>
    </script>
    <script type="text/os-template">
        <ul>
          <li repeat="${friends}">
            <span id="id${Context.Index}">${Cur.name.givenName}</span>
          </li>
        </ul>
     </script>
    ]]> </Content> 
</Module>

获取访问者的好友列表，并显示出来，想想原来冗长的JavaScript代码，而且夹杂着数据对象和HTML标签的字符串拼接，以上清晰的书写方式的确激动人心。

无需我再多说，你是不是已经跃跃欲试，要用OpenSocial Templates来重写你的OpenSocial应用？不过遗憾的告诉你，目前还没有容器支持OpenSocial0.9，Apache Shindig支持OpenSocial0.9的版本(v1.1)也还没有Release。好了，就当我们先学习一下吧。

（原文参见：http://wiki.opensocial.org/index.php?title=OpenSocial_Templates）