Javascript 使用带有HyperHTML的外部库

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

目前，我们使用moment.js和timeago作为上一次发布聊天的可读时间戳。此外，聊天列表中的最后一次味精预览也会频繁更新，但更新频率不如时间戳。所有这些组件都是单独的，但每个组件都封装在一个li-per-chat中

因此，使用带有外部库（如TimeAgo）的hyperHTML，将时间标记附加到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();

hyperHTML.bind（document.querySelector（'#txtra_chatMessages'））
${results.searchResults}${results.sidebar}
//$（'#txtra_chatMessages'）。追加（结果）；
//$（'time.t-ago'）.timeago（）；

很抱歉让您久等了。在回答您的问题之前，我想用您的示例强调一个基本问题：partial id属性：

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

当前的hyperHTML中有支持，原因很简单，这些只是不必要的逻辑开销

既然我已经澄清了这一重要问题，我可以回答你的问题

外部库和超HTML

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

这意味着，一旦您通过超HTML（通过bind或wire）创建了内容，这些内容就不应该被突兀的第三方库操纵

例如，jQuery

slider（）

是一个引人注目的插件，因为它会破坏、替换节点，并用额外的内容污染节点，干扰超HTML逻辑

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

你可以看到一个

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 chat=hyperHTML.bind(
document.querySelector（“#txtra_chatMessages”）
)`

${results.searchResults}
${results.sidebar}
`;
$（'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>`;

const{bind，wire}=hyperHTML；
const chat=bind(
document.querySelector（“#txtra_chatMessages”）
)`

${results.searchResults.map（结果=>wire（结果）`
${result.text}
（${$.timeago（result.date）}）
`)}
${results.sidebar}
`;

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

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

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

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

hyperHTML（document.body）`
${
$.magicContent（发生）
}`;

我希望这个答案是有用的

---

向安德里亚致意，你真是太好了。我们今天正在做这件事，如果有更多的事情发生，我会发布。非常感谢。我们密切关注您的工作，并有一段时间。向所有人强烈推荐HyperHTML。