使用带有HyperHTML的外部库

Question

我们希望将HyperHTML集成到聊天应用程序中。

目前，我们使用的是moment.js和timeago的人类可读的时间戳上一次聊天被张贴.另外，聊天列表中的最后一个msg预览经常更新，但不像时间戳那样频繁更新。所有这些组件都是单独的，但每次聊天都被安莉包裹在一起。

因此，使用hyperHTML与附加时间标记并从DOM呈现的外部库(如TimeAgo)一起使用，我们想知道最佳实践吗？如何在hyperHTML模板文字中使用timeago()函数？

 hyperHTML.bind(document.querySelector('#txtra_chatMessages'))
   <li class="chatEl their-msg" id="i_${results.addedon}">${results.searchResults}${results.sidebar}<\/li>
   //$('#txtra_chatMessages').append(results);
   //$('time.t-ago').timeago();

Answer 1

抱歉让你久等了在回答您的问题之前，我想用您的例子强调一个基本问题:部分id属性：

id="i_${results.addedon}"
// should be (with or without quotes)
id=${'i_' + results.addedon}

在当前的没有部分属性中有hyperHTML支持，原因很简单--这些只是不必要的逻辑开销。

既然我已经澄清了这一点，我就可以回答你的问题了。

外部库和hyperHTML

只要您理解“谁拥有什么”，您就可以轻松地将hyperHTML与您想要的任何项目集成在一起。

这意味着一旦您通过hyperHTML创建了内容，无论是通过绑定还是连线，这些内容都不应该被突出的第三部分库所操纵。

例如，jQuery slider()是一个突出的插件，因为它破坏、替换和污染了节点的额外内容，从而干扰了hyperHTML逻辑。

为了使它在没有问题的情况下工作，您可以创建一个容器节点作为目标，而不是直接更改作为内插值的节点。

你可以看到一个活生生的例子。

The timeago plugin

在这种情况下，插件不一定是突出的，您可以这样使用它：

const chat = hyperHTML.bind(
  document.querySelector('#txtra_chatMessages')
)`
  <li
    class="chatEl their-msg"
    id="${'i_' + results.addedon}"
  >
    ${results.searchResults}
    ${results.sidebar}
  <\/li>`;

$('time.t-ago', chat).timeago();

然而，这个插件的理想用法是直接在结果中创建文本信息。

const {bind, wire} = hyperHTML;
const chat = bind(
  document.querySelector('#txtra_chatMessages')
)`
  <li
    class="chatEl their-msg"
    id="${'i_' + results.addedon}"
  >
    ${results.searchResults.map(result => wire(result)`
      <span>
        ${result.text}
        (${$.timeago(result.date)})
      </span>`)}
    ${results.sidebar}
  <\/li>`;

在本例中，您可以确保整个内容都由hyperHTML处理，并且可以立即完成，而无需每次遍历聊天并更新每个节点的文本。

总之，这是理想的场景，因为内容的所有权仍然是hyperHTML，插件功能是无缝集成的。

通过bind或有线将插件集成为内容生成器的另一种方法可以是：

hyperHTML(document.body)`
  <div>${
    $.magicContent(happen)
  }</div>`;

我希望这个答案是有用的。

诚挚的问候