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呼び出しを使用する場合に正常に機能します。しかし、イベントとのデータバインドのようなknockout.js呼び出しは機能していません。

RazorビューでMVCを使用しています。

4

2 に答える 2

2

jsFiddleでいくつかの例を作成しました例を表示するには、ここをクリックしてください


したがって、一般に、ViewModelに「showdiv」および「hidediv」という名前の2つの関数を作成しました

。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」に変更できます

。ノックアウトに適用しませんでしたENDEDIT

それ

はあなたの質問に答えますか？
ありがとう。

于 2012-11-23T08:44:37.143 に答える
1

applyBindings関数を呼び出さなかったようです。

ko.applyBindings(PK);

PKまた、オブジェクトを初期化する方法もわかりません。

applyBindingsページの準備ができたら、必ず電話してください。このために、ページの下部または内部に配置できます$(document).ready。

于 2012-11-22T19:21:41.767 に答える