8、模板工具包中的菜单组件与复杂数据处理

模板工具包中的菜单组件与复杂数据处理

1. 菜单组件

1.1 菜单 HTML 示例

我们先来看一个希望生成的菜单 HTML 示例：

<table border="0">
  <tr>
    <td>
      <img src="/images/icon.png" width="4" height="4" />
    </td>
    <td>
      <a href="earth.html">Earth</a>
    </td>
  </tr>
  <tr>
    <td>
      <img src="/images/icon.png" width="4" height="4" />
    </td>
    <td>
      <a href="magrethea.html">Magrethea</a>
    </td>
  </tr>
</table>

整个菜单定义为一个 <table> 元素，每个菜单项对应一个 <tr> 行，每行包含两个 <td> 单元格，一个用于显示图标，另一个用于显示指向特定页面的链接。从这个简单示例可以看出，代码很容易变得重复，这提示我们可以将标记模块化到单独的模板