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無法正常工作

回答

相關問題