如何使用字符串/数字作为id而不是对象的hyperHTML.wire()？

Question

我有一个播放器数组：{id: string；name: string}[]，它在新玩家可用时由firebase更新。这每次都会给出一个新的播放器数组，其中有新的player对象，但具有相同的id。

因为我想在玩家被添加/删除时动画元素，所以我想重用基于player.id的元素。

AFAIK您只能将一个对象传递给线路函数，而不能传递player.id (字符串)。有办法做到这一点吗？

const playerEls = players.map((p, i) => hyperHTML.wire(p.id)`<div class="player" style="${`transform: translateY(${i * 20}px);`}">${p.name}</div>`);

hyperHtml.bind(document.body)`<h1>Players</h1>${playerEls}`

在这里，您可以找到一个可以使用的代码库：https://codepen.io/jovdb/pen/rdOzvY

我也尝试过使用hyperHTML.wire(p, ':player-' + p.id)，但这会重新创建所有元素。

Answer 1

请允许我把答案告诉你。

您只能将一个对象传递给连线函数，而不能传递player.id (字符串)。

您的示例很好地解释了原语为什么不是连接节点的好方法。

想象一下，在players.map((p, i) => ...)回调中，您使用的是i索引，而不是p.id，或者想象应用程序的任何其他部分都会使用通用数字。

对象需要授予关系的唯一性，并且您非常接近解决方案。

我也尝试过hyperHTML.wire(p，':player-‘+ p.id)，但这会重新创建所有元素。

如果您想一想，播放机和它的活动DOM表示之间的关系是它的容器，它永远不会改变，并且与任何其他表示不同播放器信息的容器不同。

const view = document.querySelector("section");
hyperHTML.wire(view, `:player-${p.id}`)`...`

这就对了。正如您在这是你的密码笔的叉中所看到的，现在每个玩家的每个ID都是唯一的。

我希望我已经回答了你的问题。致以问候。