KnockOutバインドのClickバインド

义齿

ClickバインドはDOM要素に関数を追加し、DOM要素がクリックされたときに呼び出されます.button、input、またはaラベルでよく使われていますが、実際には表示されるDOM要素に適しています.
buttonボタンをクリックするたびにviewModelのincrementClickCounter()関数が呼び出され、  numberOfClicks ， を更新します.
JavaScript関数を呼び出すことができます.view modelになくてもいいし、someObject.someFunction 。でもいいです.

"</span><span style="color: #800000;">~/Scripts/jquery-1.10.2.js</span><span style="color: #800000;">"</span>>
"</span><span style="color: #800000;">~/Scripts/knockout-3.2.0.js</span><span style="color: #800000;">"</span>>

    You've clicked  times
    "click: incrementClickCounter">Click me


"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>>
    <span style="color: #0000ff;">var</span> viewModel =<span style="color: #000000;"> {
        numberOfClicks: ko.observable(</span><span style="color: #800080;">0</span><span style="color: #000000;">),
        incrementClickCounter: function () {
            </span><span style="color: #0000ff;">var</span> previousCount = <span style="color: #0000ff;">this</span><span style="color: #000000;">.numberOfClicks();
            </span><span style="color: #0000ff;">this</span>.numberOfClicks(previousCount + <span style="color: #800080;">1</span><span style="color: #000000;">);
        }
    };
    ko.applyBindings(viewModel);
</span>

Excample(パラメータとして自身のバインド値を渡す)

この例では、次の2つに注意してください.

ネストされたバインドコンテキスト、例えばforeachバインド、またはwithブロックバインドの場合、viewmodelの下の関数を呼び出すには、現在のノードを呼び出す親ノードが必要です.または、呼び出しが必要な関数に直接ルートノードを呼び出す必要があります.構文親ノードは$parent、ルートノードは$rootです.

viewmodelでは、thisをself変数で表すと、thisの別名に相当し、場合によっては役割ドメインチェーンの混乱を防止します.

"</span><span style="color: #800000;">~/Scripts/jquery-1.10.2.js</span><span style="color: #800000;">"</span>>
"</span><span style="color: #800000;">~/Scripts/knockout-3.2.0.js</span><span style="color: #800000;">"</span>>

"foreach: places">

"text: $data">
"click: $parent.removePlace">Remove

"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>><span style="color: #000000;">
function MyViewModel() {
</span><span style="color: #0000ff;">var</span> self = <span style="color: #0000ff;">this</span><span style="color: #000000;">;
self.places </span>= ko.observableArray([<span style="color: #800000;">'</span><span style="color: #800000;">London</span><span style="color: #800000;">'</span>, <span style="color: #800000;">'</span><span style="color: #800000;">Paris</span><span style="color: #800000;">'</span>, <span style="color: #800000;">'</span><span style="color: #800000;">Tokyo</span><span style="color: #800000;">'</span><span style="color: #000000;">]);
</span><span style="color: #008000;">//</span><span style="color: #008000;">現在のアイテムの値は最初のパラメータとして渡されるので、配列内のどのアイテムが削除されるか知っています</span>
self.removePlace =<span style="color: #000000;"> function (place) {
self.places.remove(place)
}
}
ko.applyBindings(</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> MyViewModel());
</span>

Excample(click呼び出しにイベントを渡す関数)

この例はイベントハンドルを関数に渡すことを示しており,dataはコンテキストをバインドする値を指し,実際には前の例のplaceを指す.

"</span><span style="color: #800000;">~/Scripts/jquery-1.10.2.js</span><span style="color: #800000;">"</span>>
"</span><span style="color: #800000;">~/Scripts/knockout-3.2.0.js</span><span style="color: #800000;">"</span>>
"click: myFunction"> 
"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>>
    <span style="color: #0000ff;">var</span> viewModel =<span style="color: #000000;"> {
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> data, </span>
        myFunction: function (data, <span style="color: #0000ff;">event</span><span style="color: #000000;">) {
            </span><span style="color: #0000ff;">if</span> (<span style="color: #0000ff;">event</span><span style="color: #000000;">.shiftKey) {
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> click ， click  。</span>
                alert(<span style="color: #800000;">"</span><span style="color: #800000;">shift</span><span style="color: #800000;">"</span><span style="color: #000000;">);
            } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
                alert(<span style="color: #800000;">"</span><span style="color: #800000;">normal</span><span style="color: #800000;">"</span><span style="color: #000000;">);
            }
        }
    };
    ko.applyBindings(viewModel);
</span>

Excample(呼び出し関数に任意のパラメータを渡す)

"font-size:14px;">
"click:changeEditor($index)">
  
  
//     ， changeEditor()    ！

任意のパラメータを呼び出し関数に伝えたい場合は、関数の数値面量をパラメータとして使用できます.つまり、clickの後ろにjavascript変数を渡すことができます.javascript構文の特殊な形式で、1つの関数も変数として渡すことができるので、clickの後ろに匿名関数を直接書いて、その関数の中で呼び出したい関数を直接呼び出すことができます.同時にパラメータを渡します.

"</span><span style="color: #800000;">~/Scripts/jquery-1.10.2.js</span><span style="color: #800000;">"</span>>
"</span><span style="color: #800000;">~/Scripts/knockout-3.2.0.js</span><span style="color: #800000;">"</span>>
"click: myFunction"> 
"click: function(data, event) { myFunction('param1', 'param2', data, event) }">
    Click me

"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>>
    <span style="color: #0000ff;">var</span> viewModel =<span style="color: #000000;"> {
        myFunction: function (parameter1, parameter2, parameter3, parameter4) {
        }
    };
    ko.applyBindings(viewModel);
</span>

関数の数の面量を使うこの方法に加えて、knockoutのバインド関数を使って、文法を関数名にすることもできます.bing(パラメータを渡すことができます);
 

"click: myFunction.bind($data, 'param1', 'param2')">
    Click me

DOM要素のデフォルトイベントをブロック

デフォルトでは、DOM要素にclickイベントをバインドした後、クリックするとclickイベントのみが実行され、DOM要素のデフォルトイベントは実行されません.例えばaラベルは、イベントをバインドした後、クリックしてバインドイベントを実行しますが、aラベルが指す接続をジャンプすることはありません.実行を続けたい場合はtrueを返すことができます.

"</span><span style="color: #800000;">~/Scripts/jquery-1.10.2.js</span><span style="color: #800000;">"</span>>
"</span><span style="color: #800000;">~/Scripts/knockout-3.2.0.js</span><span style="color: #800000;">"</span>>

"http://www.cnblogs.com/santian/" data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>>
    <span style="color: #0000ff;">var</span> viewModel =<span style="color: #000000;"> {
        myFunction: function (parameter1, parameter2, parameter3, parameter4) {
            alert(</span><span style="color: #800080;">1</span><span style="color: #000000;">);
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> return true, 
            </span><span style="color: #008000;">//</span><span style="color: #008000;">return true;</span>
<span style="color: #000000;">        }
    };
    ko.applyBindings(viewModel);
</span>

事件の泡を止める

イベントのバブルを阻止するには、次の構文を使用します.

"click: myDivHandler">
    "click: myButtonHandler, clickBubble: false">
        Click me