如何将 hyperHTML.wire() 与 string/number 作为 id 而不是对象一起使用？

Question

我有一组玩家：{id: string; name: string}[] 当有新玩家可用时由 firebase 更新。这每次都会提供一个新的玩家数组，其中包含新的玩家对象，但具有相同的 ID。

因为我想在玩家 added/removed 时对元素进行动画处理，所以我想重用基于 player.id 的元素。

AFAIK 你只能将对象传递给 wire 函数而不是 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

请允许我为您解答。

you can only pass an object to the wire function and not the player.id (string)

你的例子完美地解释了为什么原语不是关联有线节点的好方法。

假设您在那个 players.map((p, i) => ...) 回调中使用 i 索引，而不是 p.id，或者假设应用程序的任何其他部分将使用通用数字。

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

I've also tried to us hyperHTML.wire(p, ':player-' + p.id), but that recreates all elements.

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

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

给你。正如您在 this fork of your Code Pen 中看到的，现在每个玩家的每个 ID 都是独一无二的。

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

如何将 hyperHTML.wire() 与 string/number 作为 id 而不是对象一起使用？

How to use hyperHTML.wire() with a string/number as id instead of an object?

hyperhtml