1

我在使用 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。

谢谢， 马蒂亚斯

4

1 回答 1

4

在 hyperHTML 中，基本上有两个实用程序：bind，它在节点内呈现内容，以及wire，它创建内容。

在此处输入图像描述

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

你确实只是简单地返回一个字符串数组，一个数组作为插值，如文档中所述，是 html 的明确选择，但它只是处理字符串，而不是 DOM 节点。

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

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

由于您想多次关联内部内容，因此您需要做的就是使用一个:id，以便每 N 个项目您将拥有 N 个弱关系。

我创建了一个 Code Pen 示例，通过对原始代码的极少更改来显示所有这些。

于 2017-09-16T08:35:03.710 回答