KnockoutJS 3.X API 第四章之click绑定

目的

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

例如：

You've clicked 0timesClick 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展示了一个监控属性数组，例如：

LondonRemove
ParisRemove
TokyoRemove

源码：

<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 removeself.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>