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 中，基本上有两个实用程序：bind，它在节点内呈现内容，wire，它创建内容。

wire 方法使您能够将其内容与特定对象相关联，而这是您的代码段中缺失的部分。

你确实只是返回一个字符串数组，一个数组作为插值，as described in the documentation，是 html 的明确选择，但它只是处理字符串，而不是 DOM节点.

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

要一次解决所有这些问题，您只需连接同一个项目（如果它是一个对象）或一个不会改变的引用，例如 hyperHTML 容器本身。

既然你想多次关联内部内容，你需要做的就是使用一个:id这样每N个项目你就会有N个弱关系。

我有 created a Code Pen example 通过对您的原始代码进行极少的更改来显示所有这些。

hyperHTML：循环中的通用内容总是呈现完整并失去它的绑定（点击事件）

hyperHTML: generic content in a loop is always rendered full and lose it's bindings (click events)

ecmascript-6

hyperhtml