Knockout.js - mouseover 和 mouseout 无法正常工作答案

【问题标题】：Knockout.js - mouseover and mouseout not working properlyKnockout.js - mouseover 和 mouseout 无法正常工作
【发布时间】：2012-11-22 18:50:00
【问题描述】：

我正在尝试使用 knockout.js - mouseover 和 mouseout。我对淘汰赛有点陌生。我在下面做了什么：

 <h2 id="popup" data-bind="event: { mouseover: PK.showdiv, mouseout: PK.hidediv }">
                Search
 </h2>

我的脚本块如下所示：

@section Javascript
{
<script type="text/javascript">
    $(function () {
        PK.showdiv = function () {
            alert("Showed");
        };
        PK.hidedivOver = function () {
            alert("Hidden");
        };
    })

如果我使用带有“onmouseover”或“onmouseout”的普通 JavaScript 调用，这可以正常工作。但是像 data-bind 这样的 knockout.js 调用不起作用。

我正在使用带有 Razor 视图的 MVC。

【问题讨论】：

这就是你的全部代码吗？如果是这样，您没有正确绑定。你没有给ko.applyBindings()打电话，也没有viewmodel。

标签： javascript knockout.js

【解决方案1】：

我在 jsFiddle Click here to see an example 中创建了一些示例

所以，一般来说，我在 ViewModel 上创建了两个函数，名称分别为“showdiv”和“hidediv”

Javascript 代码：
注意：我们应该在 js 代码的底部为 viewModel 应用绑定（调用 ko.applyBindings(new viewModel()); ）

var viewModel = function(data) {
    var self = this;
    self.action = ko.observable("Hidden");
    self.showdiv = function () {
        //alert('Showed');
        self.action("Showed");
        $('#mySpan').addClass('redColor');
    };

    self.hidediv = function () {
        //alert('Hidden');
        self.action("Hidden");
        $('#mySpan').removeClass('redColor');           
    };

};

ko.applyBindings(new viewModel());

HTML 代码：

<div data-bind="event: { mouseover: showdiv, mouseout: hidediv }">Search</div>
<span id="mySpan" data-bind="text: action"></span>

CSS 代码

div{
  width: 100px;
  height: 100px;
  border: 1px solid #222;
}
span{
  margin: 20px;
}
.redColor{
  color: red;
}

开始编辑
对不起，忘记提及你的错误：
1. 您没有将 PK 初始化为

var PK = this;

2. 在 HTML 代码中，您不需要使用 PK 来调用函数，只需输入函数的名称即可：

<h2 id="popup" data-bind="event: { mouseover: showdiv, mouseout: hidediv }">
            Search
</h2>

3. 在 javasript 代码中，您的函数名称不正确，例如“hidedivOver”，因此您应该将此函数重命名为“hidediv”，或者您可以将 HTML 代码中的函数“hidediv”重命名为“hidedivOver”

4. 您没有创建视图模型，也没有将其应用于淘汰赛

END EDIT

它能回答你的问题吗？
谢谢。

【讨论】：

现已修复。这是对 ko 的引用的问题。

【解决方案2】：

在我看来你没有调用applyBindings函数：

ko.applyBindings(PK);

我也看不到你是如何初始化PK 对象的。

确保您在页面准备就绪时调用applyBindings。为此，您可以将其放在页面底部或$(document).ready 内。

【讨论】：