javascript - Knockout k.apply 不是函数
问题描述
我正在尝试使用 Knockout 隐藏具有特定动画的 div,它可以工作,但出现此错误:
knockout-3.4.2.js:90 Uncaught TypeError: k.apply 不是 HTMLDivElement 的函数。
这是我正在使用的 HTML:
<div id="wikipedia-text" data-bind="click: hideWikipedia($element)"></div>
我正在调用的函数:
hideWikipedia = async function(wikiText) {
wikiText.style.animationName = "goUp";
await sleep(1000); // The animation lasts 1s, this avoids to hide the div while the animation is going
wikiText.style.display = "none";
};
有人可以帮助我了解问题所在吗?
解决方案
您传递给click
绑定的值在调用时进行评估applyBindings
。因此,hideWikipedia
立即调用,导致元素在调用 1000 毫秒后被隐藏ko.applyBindings
。
click
期望接收一个函数,这意味着hideWikipedia($element)
应该返回一个。
解决方案是更改hideWikipedia
为返回一个仅在用户单击元素后才被调用的函数:
const hideWikipedia = (wikiText) => async function() { /* logic... */ };
在一个正在运行的示例中(单击文本以在 1000 毫秒后将其隐藏):
ko.applyBindings({
hideWikipedia: wikiText => async function() {
wikiText.style.animationName = "goUp";
await sleep(1000);
wikiText.style.display = "none";
}
});
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
#wikipedia-text {
background: #efefef;
animation-duration: 1s;
}
@keyframes goUp {
100% {
opacity: 0;
transform: translateY(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="wikipedia-text" data-bind="click: hideWikipedia($element)">Hello world</div>
<p> ⬆ Click to hide </p>
推荐阅读
- node.js - 归档(删除)MongoDB 数据的最佳方式
- javascript - *ngFor 根本不使用对象数组
- python - How to clear if I have member.mention?
- python - 为什么 Pandas 坚持写入 CSV 中已经填满的行
- vba - VBA 在 PowerPivot 中设置筛选条件
- api - 此处使用备用路线映射图像 API
- ios - 未找到 Google AdMob 发布商数据。错误 iOS
- jquery - 动态添加html到页面
- docker - Erlang:为什么 inet:gethostbyname 提供 2 个地址,而 inet:getaddr 只提供一个
- python - 来自外部的Python Socket奇怪的IP连接