javascript - 内容更改后如何将hyperHTML重新呈现到同一元素

Question

我正在尝试支持与React.Children相同类型的事物

我的代码看起来像

const elem = document.getElementById("profile")
const render = hyperHTML.bind(elem);
const name = elem.textContent
render`<b>Hi ${name}</b>`

所以API看起来像

<div id="profile">alax</div> 🢂 <div id="profile"><b>Hi alax</b></div>

我正在使用 MutationObserver重新呈现内容更改

但是如果内容改变了。 hyperHTML表示将其发送到正确的元素..但该元素保留其innerHtml（不更新）

我可以看到 <!--_hyper: -2001947635;-->被删除，然后设置了内容，但是再次设置render＆hyperHTML.bind却无济于事

任何想法都很棒！谢谢



更新资料

解决上述问题的方法是调用 hyperHTML.bind``，然后使用hyperHTML正常渲染

上下文-
我正在使用hyperHTML创建自定义元素库（ hyper-element）

我的用例：我在一个混合技术项目中工作（某些人使用jQuery）

旁注，为什么。我想支持部分模板

部分模板的示例：

 <user-list data="[{name:'ann',url:''},{name:'bob',url:''}]">
     <div><a href="{#url}">{#name}</a></div>
 </user-list>

输出：

 <user-list data="[{name:'ann',url:''},{name:'bob',url:''}]">
     <div><a href="">ann</a></div>
     <div><a href="">bob</a></div>
 </user-list>

这是在您控制的元素中设置自定义内容的一种用法

目前，我可以通过三方工作/重新发送来设置内容

https://jsfiddle.net/k25e6ufv/16/



我的问题现在是：它正在渲染另一个自定义元素，并将通过内容传递给子元素

看起来hyperHTML正在将子元素的内容设置在该元素的前面，并在不设置内容的情况下创建该元素

向下滚动到源代码底部以查看实现！

https://jsfiddle.net/k25e6ufv/14/

疯狂的猫：

  Html`
  xxx: ${this.wrapedContent} zzzz
  `

电流输出：

wrapedContent: ppp time:11:35:48 ~ crazy-cats: **Party 11:35:48** xxx: zzzz

<crazy-cats>Party 11:37:21 xxx: <!--_hyper: -362006176;--> zzzz </crazy-cats>

所需的输出：

wrapedContent: ppp time:11:35:48 ~ crazy-cats: xxx: **Party 11:35:48** zzzz

<crazy-cats> xxx: Party 11:37:21 zzzz </crazy-cats>

Answer 1

我将尽力回答最好的问题，但是我会开始说，在寻求帮助时，显示要解决的最简单用例会容易得多/更好。

小提琴中有很多“环绕”代码，因此我将尝试仅回答hyperHTML相关位。



超元素？

我不确定该库的目标是什么，但是hyperHTML公开了hyper.Component，并且还有一个官方的HyperHTMLElement class可以扩展，它可以完成您在示例中手动实现的大多数事情。

我会继续回答您的问题，但请考虑至少尝试使用官方替代方法，并在需要时进行一些更改。



部分模板

hyperHTML模式和强度是Template Literal标准。因此，从DOM生成TL将需要解析内容或进行代码评估。两种解决方案都不可行。

自定义元素需要JavaScript才能运行，没有JS，您的部分模板将无用，并且可能会使用户/消费者感到困惑。

您不想定义如何处理布局中的data，而是想要在定义它的类中定义“自定义元素”行为。

这意味着：摆脱老式的in-DOM输出，只需使用Custom Element类定义其内容。您仅维护相关类，而不维护不了解CE应如何表示该数据的布局。

TL; DR以下是错误的hyperHTML模式：

<user-list data="[{name:'ann',url:''},{name:'bob',url:''}]">
  <div><a href="{#url}">{#name}</a></div>
</user-list>

您要做的就是编写以下代码：

<user-list data="[{name:'ann',url:''},{name:'bob',url:''}]"></user-list>

但请注意， data中的 hyperHTML属性仅在通过模板文字传递时才是特殊的。如果要将JSON传递给组件，请以其他方式调用属性。

// hyperHTML data is special, no need to use JSON
render`<c-e data=${{as: 'it is'}}></c-e>`

上面的代码段不同于将JSON作为数据属性文本，因此您的示例应使用 data-json名称，并且该类应记住其构造函数中的 JSON.parse(this.dataset.json)（或具有为您执行此操作的属性观察器）



hyperHTML拥有元素

当你写：


  看起来hyperHTML正在将子元素的内容设置在该元素的前面，并在不设置内容的情况下创建了该元素


您假设您应该完全关心 hyperHTML的作用：您不应该这样做。

您唯一应该了解的是 hyperHTML拥有它处理的节点。如果通过不同的库或手动删除这些节点，则说明您做错了。

hyperHTML(document.body)`<p>hello ${'world'}</p>`;
// obtrusive libraries ... later on ...
document.body.textContent = 'bye bye';
// hyperHTML still owns the body content
hyperHTML(document.body)`<p>hello ${'world'}</p>`;

上面的代码片段非常好，并且完全是错误的。
您无需手动更新 body内容，也不会通过 jQuery或其他库干扰其内容，并且绝对不要丢弃该内容。

一旦选择 hyperHTML处理绑定的上下文，就是这样，您已做出选择。

世界上几乎所有图书馆都是如此。如果您使用Angular创建某些东西，然后通过jQuery将其弄乱了，那将会中断。如果编写骨干模板，以后又手动弄乱它们的内容，那将会中断。

如果将元素绑定到 hyperHTML并将其与其他库混淆，则会中断。

唯一不会断裂的是导线，这意味着在创建导线的那一刻，您可以直接将其附加，并且实际上是一个DOM节点，因此它将存在于此，并将由 hyperHTML处理。

但是，您应该使用 hyperHTML处理这些更改，而不要使用jQuery或JS本身。



输出正确

当您说输出不应包含注释时，您假设您应该关心通过 hyperHTML产生的输出：您不应该！

hyperHTML使用注释作为分隔符，这些注释对于性能，不受重绘和重排的影响以及部分更改（如以下内容）绝对是很好的：

hyperHTML(document.body)`<p>${'a'} b ${'c'}</p>`

a和 c都将有一个注释作为锚点，以便以后可以更新其内容。

hyperHTML(document.body)`<p>${[list, of, nodes]} b ${otherThing}</p>`

您要更改插值吗？很好， hyperHTML知道要替换的东西以及在哪里替换。



强制拥有内容

如果您使用其他模板文字来重新填充绑定的节点，那么您将破坏缓存并创建新内容。

那时，您最好使用 innerHTML，因为 hyperHTML的所有功能都将消失。

首先，如果您的内容可以改变很多，请使用数组。

hyper(document.body)`${['text']}`;
// you can clean up the text through empty array
hyper(document.body)`${[]}`;
// re-populate it with new content
hyper(document.body)`${['a', 'b', 'c']}`;

上面的示例仍然比更改模板更好，因为对内容的所有优化都已经存在。

但是，如果要确保该节点是通过 hyperHTML创建的初始节点，假设没有第三方脚本对该节点进行更改/删除，则可以使用连线。

const body = hyper()`<p>my ${'content'}</p>`;
document.body.textContent = '';
document.body.appendChild(body);

这有点极端，但至少更快。



作为总结

似乎您正在尝试将 hyperHTML潜入应用程序，该应用程序始终通过不同的第三方库来破坏布局。

除非您创建一个封闭的Shadow DOM引用，并通过布局放置部分模板，否则基于DOM内容的副作用的库总是会出现问题，这些库会改变它们不拥有的元素。

在 hyperHTML中，所有权概念是关键，就像在 React中一样，您不能在运行时更改组件的已定义JSX，也永远不要尝试在运行时更改 hyperHTML的已定义模板文字。

现在，只要我想解决所有问题，我想问你是对的：您确定 hyperHTML确实是当前应用程序的解决方案吗？如果您不使用封闭模式Shadow DOM和 hyperHTML仅用于更新DOM，则由第三方库引起的周围副作用似乎会不断破坏您的期望。