iOS/Android/WAP 全兼容专题页面制作方法（三）

3.    数据绑定

3.1.为什么要使用自定义标签

既然在后台我们已经准备好数据了，于是接下来的问题就是，怎么把数据和界面合在一起呢？完成这项工作的就是所谓的“数据绑定”。我们通过自定义标签完成 HTML 页面与实体之间的数据绑定，也就是说，我们采用我们自定义的一些标签，或者说咱们约定的一些标记，说明我们需要引用什么数据展现在数据上。通常这是数据集合，我们便用 <listview> 表示之。预期的数据可以正确展示了，那么标签的首要任务也就达到了。

其次，通过合理解析自定义标签，可以使得制作一套专题页面即可跨平台展示了，包括 WAP 版、客户端（Android & iPhone）等，从而减少差异化带来的冗余工作。

自定义标签并不复杂，让我们一起来学习吧！

3.2.使用自定义标签

自定义标签分两类： 单内容事件标签、列表呈现标签。

一、单内容事件标签

• 用途：对于单个文字或图片链接，点击的时候指向对应的内容展示界面。如在html中增加静态图片，要求点击即进入某频道播放界面或某视频的播放界面。
• 支持内容类型：直播、点播、专辑、专题、图文、图集。
• 样例：

<a href="###" data-event="play" data-type='live' data-id='1'>
    <div align="center">
       <img src="images/55.jpg" width="320" />
    </div>
</a>

              或者

<a href="###" data-event="tap" data-type="live" data-id="2">展播平台</a>

二、列表呈现标签

• 用途：在专题页面的某区域中显示某栏目中的类容列表，列表以多种方式展示，类表中的元素点击将跳转到相应的内容展示界面，并支持免费参数。支持简单的栏目中内容的过滤，如指定获取视频列表或图文列表。
• 支持内容类型:直播、点播、专辑、专题、图文、图集、广告（url）。
• 列表风格类型：单列图文、双列图（压缩标题）、单列文字标题。
• 样例：

<listview data-section="332" data-viewmode="2" data-contenttype="all" data-row="15" data-sort="default"></listview>