Knockout.Js官網學習（click綁定）

前言

click綁定在DOM元素上添加事件句柄以便元素被點擊的時候執行定義的JavaScript 函數。大部分是用在button，input和鏈接a上，可是能夠在任意元素上使用。

簡單示例

<h2>ClickBind</h2>
<div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> 
<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
    ko.applyBindings(viewModel);
</script>

預覽效果

　　

每次點擊按鈕的時候，都會調用incrementClickCounter()函數，而後更新自動更新點擊次數。

你能夠聲明任何JavaScript函數 – 不必定非要是view model裏的函數。你能夠聲明任意對象上的任何函數，例如： someObject.someFunction。

View model上的函數在用的時候有一點點特殊，就是不須要引用對象的，直接引用函數自己就好了，好比直接寫incrementClickCounter 就能夠了，而無需寫成： viewModel.incrementClickCounter（儘管是合法的）。

傳參數給你的click 句柄

 最簡單的辦法是傳一個function包裝的匿名函數：

<button data-bind="click: function() { viewModel.myFunction('param1', 'param2') }">
    Click me
</button>

這樣，KO就會調用這個匿名函數，裏面會執行viewModel.myFunction()，而且傳進了'param1' 和'param2'參數。

訪問事件源對象

 有些狀況，你可能須要使用事件源對象，Knockout會將這個對象傳遞到你函數的第一個參數：

<button data-bind="click: myFunction">
    Click me   event
</button>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> 
<script type="text/javascript">
    var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        },
        myFunction: function (event) {
            //////
        }
    };
    ko.applyBindings(viewModel);
</script>

若是你須要的話，可使用匿名函數的第一個參數傳進去，而後在裏面調用：

<button data-bind="click: function(event) { viewModel.myFunction(event, 'param1', 'param2') }">
    Click me
</button>

這樣，KO就會將事件源對象傳遞給你的函數而且使用了。

容許執行默認事件

默認狀況下，Knockout會阻止冒泡，防止默認的事件繼續執行。例如，若是你點擊一個a鏈接，在執行完自定義事件時它不會鏈接到href地址。這特別有用是由於你的自定義事件主要就是操做你的view model，而不是鏈接到另一個頁面。

固然，若是你想讓默認的事件繼續執行，你能夠在你click的自定義函數裏返回true。

防止事件冒泡

默認狀況下，Knockout容許click事件繼續在更高一層的事件句柄上冒泡執行。例如，若是你的元素和父元素都綁定了click事件，那當你點擊該元素的時候兩個事件都會觸發的。若是須要，你能夠經過額外的綁定clickBubble來禁止冒泡。例如：

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

默認狀況下，myButtonHandler會先執行，而後會冒泡執行myDivHandler。但一旦你設置了clickBubble爲false的時候，冒泡事件會被禁止。