2

我正在尝试使用 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。

4

2 回答 2

2

我在 jsFiddle 中创建了一些示例单击此处查看示例


所以，一般来说，我在我的 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;
}


START EDIT
抱歉，忘记提及您的错误：
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

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

于 2012-11-23T08:44:37.143 回答
1

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

ko.applyBindings(PK);

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

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

于 2012-11-22T19:21:41.767 回答