将外部库与 HyperHTML 结合使用

Question

我们正在寻求将 HyperHTML 集成到聊天应用程序中。

目前，我们使用 moment.js 和 timeago 作为上次发布聊天的人类可读时间戳。聊天列表中的最后一条消息预览也经常更新，但没有时间戳那么频繁。所有这些组件都是独立的，但在每个聊天中每个组件都包含在一个 li 中。

因此，将 hyperHTML 与外部库（如 TimeAgo）结合使用，将时间标签附加到 DOM，并从 DOM 呈现，我们想知道最佳实践吗？如何在 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 中有 no partial attributes 支持，原因很简单，这些只是不必要的逻辑开销。

既然我已经阐明了这一点，我可以回答你的问题了。

外部库和 hyperHTML

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

这意味着一旦您通过 hyperHTML 创建内容，无论是通过绑定还是连线，此类内容不应被干扰性的第 3 部分库所操纵。

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

为了使其正常工作，您可以创建一个容器节点作为目标，而不是直接更改用作插值的节点。

你可以看到一个live example here.

timeago插件

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

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，并且插件功能是无缝集成的

另一种通过绑定或连线将插件集成为内容生成器的方法可能是以下方法：

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

希望这个回答对您有所帮助。

此致

将外部库与 HyperHTML 结合使用

Using an external library with HyperHTML

html

javascript

dom

ecmascript-6

hyperhtml