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

Question

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

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

我的脚本 block 如下:

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

如果我使用带有“onmouseover”或“onmouseout”的普通 JavaScript 调用，这会很好地工作。但是 knockout.js 调用(如事件数据绑定(bind))不起作用。

我正在使用带 Razor View 的 MVC。

Answer 1

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

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

JavaScript 代码:
注意:我们应该在 js 代码的底部为我们的 viewModel 应用绑定(bind)(调用 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.您没有创建 View 模型，也没有将其应用于 knockout

结束编辑

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