敲除k.apply不是函数

时间:2018-08-08 11:40:52

标签: javascript knockout.js

我正在尝试使用Knockout隐藏具有特定动画的div,它可以工作,但出现此错误:

  

knockout-3.4.2.js:90未捕获的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";
};

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

1 个答案:

答案 0 :(得分:1)

您传递给click绑定的值是在调用applyBindings时评估的。因此,hideWikipedia立即被调用,导致元素在调用ko.applyBindings后1000ms被隐藏。

click希望收到一个功能,这意味着hideWikipedia($element)应该返回一个。

解决方案是更改hideWikipedia以返回仅在用户单击元素后才调用的函数:

const hideWikipedia = (wikiText) => async function() { /* logic... */ };

在一个正在运行的示例中(单击文本以在1000ms后将其隐藏):

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>