- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们正在寻求将 HyperHTML 集成到聊天应用程序中。
目前,我们使用 moment.js 和 timeago 作为人类可读的上次聊天时间戳。聊天列表中的最后一条消息预览也经常更新,但没有时间戳那么频繁。所有这些组件都是独立的,但在每个聊天中每个组件都包含在一个 li 中。
因此,将 hyperHTML 与将时间标签附加到 DOM 并从 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();
最佳答案
抱歉久等了。在回答您的问题之前,我想强调您示例的一个基本问题:部分 id 属性:
id="i_${results.addedon}"
// should be (with or without quotes)
id=${'i_' + results.addedon}
有no partial attributes由于简单的原因,当前的 hyperHTML 支持这些只是不必要的逻辑开销。
既然我已经阐明了这一点,我就可以回答你的问题了。
外部库和 hyperHTML
只要您了解“谁拥有什么”,您就可以轻松地将 hyperHTML 与您想要的任何项目集成。
这意味着一旦您通过 hyperHTML 创建内容,无论是通过绑定(bind)还是连线,此类内容不应被干扰性的第 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,并且插件功能是无缝集成的
另一种通过绑定(bind)或连线将插件集成为内容生成器的方法可能是以下方法:
hyperHTML(document.body)`
<div>${
$.magicContent(happen)
}</div>`;
我希望这个答案在某种程度上有用。
最好的问候
关于javascript - 将外部库与 HyperHTML 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48679519/
我刚刚开始使用 hyperHTML。我正在构建一个需要路由的小应用程序,因此我将其与 hyperhtml-app 结合起来。 我正在尝试在 View 上设置单击处理程序来处理 anchor 元素上的单
我喜欢 hyperHtml 和 lit-html 的简单性,它们使用“标记模板文字”来仅更新模板的“可变部分”。简单的 javascript,不需要虚拟 DOM 代码和推荐的不可变状态。 我想尝试尽可
当我检查由以下代码创建的 html 元素时(在 Chrome 中使用 hyperHTML,整个列表会刷新(我假设这是基于 中的所有元素短暂闪烁的紫色)。 function updateList(re
我正在尝试将 CSS 动画与进入 DOM 的 hyperHTML 元素结合起来。我的第一个想法是使用“onconnected”事件,但这种方法存在时间问题。这样做感觉不对——尤其是当我需要添加 set
此代码不起作用。 const render = ({title, tag, values}) => { bind(document.body)` ${title}
我有以下两个组件: // component.js // imports ... function ListItem(item) { const html = wire(item) funct
我们正在寻求将 HyperHTML 集成到聊天应用程序中。 目前,我们使用 moment.js 和 timeago 作为人类可读的上次聊天时间戳。聊天列表中的最后一条消息预览也经常更新,但没有时间戳那
我有以下 hyperHTML 组件,一切都按预期工作,唯一的问题是整个组件 DOM 在每次 this.setState() 调用时都会重新呈现。 我的问题: 有没有一种方法可以在不重新渲染整个组件 D
是否可以有一个自定义的 bool 属性?在 bool 属性的 hyperHTML 文档中,它声明如下: Just use boolean attributes any time you need th
我正在构建一个搜索自动建议组件,其中结果用 hyperHTML 呈现。 从服务器返回的建议的匹配字符串部分应突出显示。 我正在使用 RegEx 和 String.prototype.replace突出
我正在努力理解 HyperHTML以及如何从中获得最佳性能。 正在阅读 how it works under the hood ,这似乎暗示模板和 DOM 之间建立了牢固的联系,我认为这意味着它需要与
我正在查看这个 React 示例,了解 Material.io 组件如何实现/与 React 组件集成: https://github.com/material-components/material
在 FireFox 和 Safari 上呈现时,A-Frame 内容不会在 Chrome 上呈现。 根据 CodePen hereconst { hyper, wire } = hyperHTML;
也许我做了一些非常错误的事情,但我似乎无法让 hyperhtml-element 与 babel 很好地配合。 如果我从“hyperhtml-element”导入 HyperHTMLElement,那
我是一名优秀的程序员,十分优秀!