hyperHTML:循环中的一般内容总是呈现为完整的，并丢失了它的绑定(单击事件)

Question

我使用hyperHTML有一些问题(可能只是一些理解-问题)。

当循环中有动态内容时，内容会被完全呈现并丢失它的绑定(比如document.body.innerHTML = content，这不是hyperHTML的概念，不是吗？)请参阅我的例子如下：

​

function render() {
  console.log('render');
  
  hyperHTML.bind(document.body) `start:<br>
    ${[1,2,3].map(item => `
      count <button id="testbutton${item}">button${item}</button><br>
    `)}<br>
    press button2<br>
    <button id="testbutton">Test Button</button><br>
    last rendering ${new Date().toTimeString()}`;
}

function init() {
  render();
  let self = this;
  document.querySelector('#testbutton2').addEventListener('click', () => self.render());  
  document.querySelector('#testbutton').addEventListener('click', () => self.render());  
}
window.addEventListener('load', () => init());

<script src="https://webreflection.github.io/hyperHTML/min.js"></script>

​

第一次单击button2时，将呈现内容。初始绑定仍然有效。在再次呈现内容之后，侦听器将丢失。

另一方面，Test Button不会再次呈现。绑定仍然存在。

有人能解释一下，如何通过迭代列表来正确地使用hypeHTML吗？

谢谢，马提亚斯

Answer 1

在hyperHTML中，基本上有两个实用程序:绑定(在节点内呈现内容)和连接(创建内容)。

​

​

连接方法使您能够将其内容关联到特定的对象，这是代码片段中缺少的部分。

实际上，您只是返回一个字符串数组，数组作为插值值( 如文件所述 )是html的一个显式选择，但它只是处理字符串，而不是DOM节点。

您还将该字符串用作常规模板文字，而不是hyperHTML内容，因为您在野外使用插值，比如内部属性，这在hyperHTML中是不允许的(在文档中阅读有关部分属性的内容)。

要立即解决所有这些问题，您只需连接相同的项(如果是对象)或不会更改的引用(如hyperHTML容器本身)。

因为您希望多次关联内部内容，所以您所需要做的就是使用一个:id，这样每个N项就会有N个弱关系。

我有一个创建代码笔示例，它通过对原始代码的很少更改来显示所有这些。