我们正在寻求将 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();
最佳答案
抱歉让您久等了。在回答您的问题之前,我想强调一下您的示例的一个基本问题:部分 id 属性:
id="i_${results.addedon}"
// should be (with or without quotes)
id=${'i_' + results.addedon}
有no partial attributes当前 hyperHTML 中的支持,原因很简单,这些只是不必要的逻辑开销。
现在我已经澄清了这一点,我可以回答你的问题了。
外部库和 hyperHTML
只要您了解“谁拥有什么”,您就可以轻松地将 hyperHTML 与您想要的任何项目集成。
这意味着一旦您通过 hyperHTML(无论是通过绑定(bind)还是连线)创建内容,此类内容就不应该由干扰性的第三部分库操纵。
例如,jQuery slider()
是一个干扰性插件,因为它会废弃、替换和污染节点的额外内容,从而干扰超 HTML 逻辑。
为了使其正常工作,您可以创建一个目标容器节点,而不是直接更改用作插值的节点。
您可以看到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,并且插件功能无缝集成
通过绑定(bind)或连线将插件集成为内容生成器的另一种方法可能如下:
hyperHTML(document.body)`
<div>${
$.magicContent(happen)
}</div>`;
我希望这个答案有点用。
最诚挚的问候
关于javascript - 将外部库与 HyperHTML 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48679519/