如何使用 Javascript 在网页上创建一个列表，其中每个项目都基于模板

How can I create a list on a webpage, where each item is based on a template, using Javascript?

本文关键字：列表 于模板 项目 一个 Javascript 何使用 网页 创建      更新时间：2023-09-26

我正在创建一个页面，旨在用作Awesomium的GUI控件。在此页面中，我想要一个列表，其内容在运行时由应用程序控制。

Awesomium允许将网页渲染到缓冲区，例如，在3D应用程序中绘制为对象的纹理，因此没有"服务器"来运行服务器端代码，并且"GUI"和应用程序之间的通信几乎完全通过Javascript函数调用和回调完成。

该列表将由许多<div>组成，每个相对复杂，因此我想为可以填充并添加到列表中的条目创建一个模板。

到目前为止，我一直在做类似的事情：

    function refresh() {
        contentpane.innerHTML = '';
        var i = 0;
        for (i = 0; i < page.contentlist.length; i++) {
            contentpane.innerHTML += '<div id=''' + page.contentlist[i] + '''class="button" onclick=page.callback("clicked",id) > <img src="'screenshot.jpg"/> <label ></label> </div>';
        }
    }

但是我的列表条目越复杂，这就越笨拙，所以我认为一定有更好的方法。

在

Javascript 函数中创建模板化项列表的最简单方法是什么？

是否有类似于我可以使用的 WPF 的数据模板系统的内容？

下划线.js有一个模板引擎，你可以看看。您还可以将模板放入单独的文件中，并在必要时通过 ajax 加载它们。

假设您有以下模板：

<script type="text/template" id="tmpl-listentry">
  <div id='<%= content %>' class="button" onclick='page.callback("clicked",id)'>
    <img src="/screenshot.jpg" />
    <label></label>
  </div>
</script>

然后，您可以在加载它并将其附加到您的文档后像这样使用它：

function refresh() {
    var i = 0,
        tmplElem = document.getElementById('tmpl-listentry'),
        compiled = _.template(tmplElem.innerHTML);
    contentpane.innerHTML = '';
    for (i = 0; i < page.contentlist.length; i++) {
        contentpane.innerHTML += compiled({content: page.contentlist[i]});
    }
}

注意：当然，您应该缓存已编译的模板，而不是在每次刷新时对其进行编译。

我会建议像这个模板工具这样的东西......

您的应用程序应该生成 JSON 数据，您可以在上述工具的帮助下获取和显示这些数据。这样，您将获得演示和逻辑的清晰分离。

生成列表的示例如下所示：

.HTML 

<table class="playerList">
  <thead>
    <tr>
      <th>Player</th>
    </tr>
  </thead>
  <tbody>
    <tr class="player">
      <td>Chloe</td>
    </tr>
  </tbody>
</table>

命令

{
  "tbody tr": {
    "player<-players": {
      "td": "player",
      "td@style": "'"cursor:pointer'"",
      "td@onclick": "'"clickLine(this);'""
    }
  }
}

数据

{
  "players": [
    "Adrian Meador",
    "Bryan OConnor",
    "Todd Swift",
    "Valerie Paige",
    "Walter Hagelstein",
    "Wendy Leatherbury"
  ]
}

结果

Player
Adrian Meador
Bryan OConnor
Todd Swift
Valerie Paige
Walter Hagelstein
Wendy Leatherbury
相关文章：