如何编写可以遍历所有嵌套数据并在HTML中显示嵌套列表的可重用模板

编写可以遍历所有嵌套数据并在HTML中显示嵌套列表的可重用模板，可以使用递归的方式来实现。以下是一个示例的可重用模板：

<script id="nestedListTemplate" type="text/template">
  <ul>
    <% for (var i = 0; i < data.length; i++) { %>
      <li>
        <%= data[i].name %>
        <% if (data[i].children && data[i].children.length > 0) { %>
          <%- nestedListTemplate(data[i].children) %>
        <% } %>
      </li>
    <% } %>
  </ul>
</script>

在上面的模板中，我们使用了 <script> 标签来定义模板，并设置了一个唯一的 id（nestedListTemplate）。模板中使用了 <% %> 和 <%= %> 语法来插入动态内容。

在模板中，我们首先创建一个 <ul> 元素作为根节点，然后使用循环遍历数据数组。对于每个数据项，我们创建一个 <li> 元素，并显示其名称（data[i].name）。然后，我们检查该数据项是否有子项（data[i].children），如果有，我们使用递归调用模板来生成嵌套的子列表。

为了使用这个模板，我们可以在 JavaScript 中编写以下代码：

// 获取模板内容
var template = document.getElementById('nestedListTemplate').innerHTML;

// 定义数据
var data = [
  {
    name: 'Item 1',
    children: [
      {
        name: 'Item 1.1',
        children: [
          {
            name: 'Item 1.1.1',
            children: []
          },
          {
            name: 'Item 1.1.2',
            children: []
          }
        ]
      },
      {
        name: 'Item 1.2',
        children: []
      }
    ]
  },
  {
    name: 'Item 2',
    children: []
  }
];

// 渲染模板
var renderedHTML = _.template(template)({ data: data });

// 将渲染后的 HTML 插入到页面中
document.getElementById('nestedListContainer').innerHTML = renderedHTML;

在上面的代码中，我们首先获取模板内容，并定义了一个数据数组。然后，我们使用模板引擎（这里使用了 Underscore.js 的 _.template 方法）将数据传递给模板，并生成最终的 HTML 字符串。最后，我们将生成的 HTML 插入到页面中的容器元素（nestedListContainer）中。

这样，我们就可以通过使用这个可重用模板来遍历所有嵌套数据并在 HTML 中显示嵌套列表。