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

我正在尝试使用knockout.js - mouseover和mouseout。我对Knockout有点新。我已经做过如下：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"); 
     }; 
    })

如果我正常使用JavaScript调用用“的onmouseover”或“的onmouseout”这工作得很好。但knockout.js调用像事件的数据绑定不起作用。

我正在使用MVC与剃刀视图。

来源

2012-11-22 Anirban Ghosh

这就是你的所有代码？如果是这样，你没有正确的约束力。你没有调用'ko.applyBindings（）'，并且没有viewmodel。 – Tyrsius

我在的jsfiddle创造了一些例子Click here to see an example

所以，总的来说，我创建了两个函数对我的视图模型与名称 'showdiv' 和 'hidediv'

的JavaScript代码：
注：我们应该运用绑定我们的视图模型在我们的js代码的底部（调用ko.applyBindings（新视图模型（））;）

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.您没有创建视图模型，并没有将其应用到淘汰赛

编辑完

是否回答你的问题？
谢谢。

来源

2012-11-23 08:44:37 Pavlo

只是我还是jsFiddle不为别人工作？ – MrB

现在已经修复。这是对ko的引用的问题。 – Pavlo

在我看来，你没有调用applyBindings功能：

ko.applyBindings(PK);

此外，我不看你怎么初始化PK对象。

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

来源

2012-11-22 19:21:41

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

回答

相关问题