敲除 k.apply 不是函数

Question

我正在尝试使用 Knockout 隐藏带有特定动画的 div，它有效，但我收到此错误：

knockout-3.4.2.js:90 Uncaught TypeError: k.apply is not a function at 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";
};

有人可以帮助我了解问题所在吗？

Answer 1

您传递给 click 绑定的值在调用 applyBindings 时计算。因此，立即调用 hideWikipedia 导致元素在调用 ko.applyBindings.

后隐藏 1000 毫秒

click 期望收到一个函数，这意味着 hideWikipedia($element) 应该 return 一个。

解决方案是将 hideWikipedia 更改为 return 一个只有在用户单击元素后才会调用的函数：

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>

敲除 k.apply 不是函数

Knockout k.apply is not a function

javascript

knockout.js