KnockoutJS 3.X API 第四章 表单绑定(6) click绑定

目的

click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。

例如：

You've clicked timesClick me

源码：

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

如上述例子，没点过button被点击时都会触发incrementClickCounter 回调函数，从而更新视图状态。

备注，click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数，直接引用即可。例如：click: someObject.someFunction。

备注1：传递一个参数

当您的处理程序中，UI展示了一个监控属性数组，例如：

• Remove

源码：

<ul data-bind="foreach: places">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removePlace">Remove</button>
    </li>
</ul>
 
 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
 
         // The current item will be passed as the first parameter, so we know which place to remove
         self.removePlace = function(place) {
             self.places.remove(place)
         }
     }
     ko.applyBindings(new MyViewModel());
</script>

当点击remove时只会删除当前的项目，从源码上看，说明传递的是当前项目。这种在渲染集合数据的时候特别有用。

需要注意两点：

• 如果你是一个嵌套在绑定上下文，例如，如果使用foreach或with绑定，但你的处理函数是根视图模型或其他一些父模型，你需要使用一个前缀，如$parent或$root定位处理函数。
• 在您的视图模型，但是这是可以使用self（或其他一些变量）作为this的一个别名。

备注2:传递事件对象(多参数)

一些情况下，你可能需要访问DOM的事件对象(event)，一般情况下KO会将事件对象作为第二个参数传递给函数。例如：

<button data-bind="click: myFunction">
    Click me
</button>
 
 <script type="text/javascript">
    var viewModel = {
        myFunction: function(data, event) {
            if (event.shiftKey) {
                //do something different when user has shift key down
            } else {
                //do normal action
            }
        }
    };
    ko.applyBindings(viewModel);
</script>

如果你要传递更多的参数，可以使用函数文本的方式。例如：

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

还有更优雅的写法，比如使用bind函数绑定多个参数。例如：

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

备注3：允许默认点击动作

默认情况下，Ko会阻止任何默认动作。比如你把click绑定到一个a标签上，当点击时，浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。

如果你不希望这种默认的阻止动作。可以在回调函数中返回true。

备注4：防止冒泡事件

默认情况下，KO允许click绑定继续到任何高级别的事件处理。例如，父元素和子元素都有click绑定，那么这两个元素的click绑定会都被触发。

可以使用一个附加绑定clickBubble来解决该问题：

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

如上述例子，myButtonHandler将被调用，而附件绑定clickBubble，并设置了false，这至使父元素的myDivHandler不会被调用。

备注5：与Jquery互动

如果存在Jquery的click事件，KO将会去调用Jquery的click事件，如果你想总是使用自己本地的事件来处理，可以在ko.applyBindings中加入如下代码：

ko.options.useOnlyNativeEvents = true;