0

我有一组玩家： {id: string; 名称：字符串}[]，当有新玩家可用时由 firebase 更新。这每次都会给出一个新的玩家数组，其中包含新的玩家对象，但具有相同的 id。

因为我想在添加/删除玩家时为元素设置动画，所以我想重用基于 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}`

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

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

4

1 回答 1

1

请允许我带你通过答案。

您只能将对象传递给wire函数而不是 player.id (string)

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

想象在那个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}`)`...`

你去吧。正如您在Code Pen 的这个分支中所看到的，现在每个玩家的每个 ID 都是唯一的。

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

于 2018-03-13T07:03:06.490 回答