Question

我有一系列玩家：{id：string; name：string} []当新玩家可用时由firebase更新。每次都会给出一系列具有新玩家对象的新玩家，但ID值相同。

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

AFAIK你只能将一个对象传递给wire函数而不是player.id（string）。有没有办法实现这个目标？

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}`

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

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

Answer 1

请允许我带我通过答案。

你只能将一个对象传递给wire函数而不是player.id（string）

您的示例非常适合解释为什么原语不是关联有线节点的好方法。

想象一下，使用players.map((p, i) => ...)索引的i回调代替p.id，或者想象应用的任何其他部分都会使用通用数字。

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

我还尝试过hyperHTML.wire（p，＆＃39;：player - ＆＃39; + p.id），但这会重新创建所有元素。

如果你考虑一下，你在玩家和它的实时DOM表示之间的关系就是它的容器，它永远不会改变，并且与代表不同玩家信息的任何其他容器不同。

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

你去吧。正如您在this fork of your Code Pen中所看到的，现在每个玩家每个ID都是唯一的。

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

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

1 个答案: