Question

我正在尝试使用knockout.js - mouseover和mouseout。我对Knockout有点新意。我在下面做了什么：

 <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");
        };
    })

如果我使用普通的JavaScript调用“onmouseover”或“onmouseout”，这样可以正常工作。但是knockout.js调用就像数据绑定事件一样无效。

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

Answer 1

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

ko.applyBindings(PK);

此外，我看不到您如何初始化PK对象。

确保在页面准备好后致电applyBindings。为此，您可以将其放在页面的底部或$(document).ready内。

Answer 2

我在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。您没有创建视图模型，也没有将其应用于敲门郎

结束编辑

它是否回答了您的问题？
感谢。

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

2 个答案: