KnockoutJs学习笔记（九）

因为component binding部分的内容更为复杂一些，因此这部分我暂时跳过，先学习click binding部分。

click binding不只能够做用于button、input、a等元素，也能够做用于其余任何可见的DOM元素。

下面是一个简单的例子：

html部分：

1 <div>
2     You've clicked <span data-bind="text: numberOfClicks"></span> times
3     <button data-bind="click: incrementClickCounter">Click me</button>
4 </div>

js部分：

 1 function MyViewModel() {
 2     var self = this;
 3     self.numberOfClicks = ko.observable(0);
 4     self.incrementClickCounter = function() {
 5         var previousCount = self.numberOfClicks();
 6         self.numberOfClicks(previousCount + 1);
 7     };
 8 }
 9 
10 ko.applyBindings(new MyViewModel());

这里须要注意的是numberOfClicks的修改方法。

click binding不单单能够绑定viewModel中的方法，也能够绑定其余任意的方法。

注意一：在调用click binding的处理函数时，咱们能够给它传递一个参数做为当前做用的项（current item），这种操做每每在处理集合或是数组时很是有用。

下面是一个简单的例子：

html部分：

1 <ul data-bind="foreach: people">
2     <li>
3         <span data-bind="text: $data"></span>
4         <button data-bind="click: $parent.removePerson">Remove</button>
5     </li>
6 </ul>

js部分：

1 function MyViewModel() {
2     var self = this;
3     self.people = ko.observableArray([ "Kazusa", "Chiaki", "Charlie" ]);
4     self.removePerson = function(person) {
5         self.people.remove(person);
6     };
7 }
8 
9 ko.applyBindings(new MyViewModel());

注意上例中关于$parent的使用，在使用foreach binding或是with binding时，必定要明确本身可以直接调用的viewModelProperty的范围，若是在更高的层次，则要考虑使用$parent或是$root这样的前缀。

注意二：在某些时候，咱们须要获取与click事件相关联的DOM event object（提及来听绕口，我以为能够直接就说是包含click在内的可以触发相应绑定的处理函数的事件），KO将这个事件做为处理函数的第二个参数，好比说咱们但愿在按下shift键的clik与通常的click有所区别，则能够利用这一参数在处理函数中进行区分。

若是咱们须要传递更多的参数，有如下两种方式：

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

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

其中第二种方式用到了bind方法，能够参考function.prototype.bind()，这个留做之后研究。

注意三：在默认状况下，使用click binding会屏蔽掉原先click的默认功能，好比对于一个a元素，在使用click binding以后，并不会跳转到href所描述的地址。若是咱们但愿恢复默认的功能，只须要在click binding所绑定的处理函数的最后返回一个true便可。

注意四：在某些时候，咱们的html部分可能会存在嵌套的click binding的状况，以下：

1 <div data-bind="click: function1">
2     <div data-bind="click: function2">
3         <button data-bind="click: function3">Click me</button>
4     </div>
5 </div>

在这种状况下，若是咱们点击页面上的button，则会依次触发function三、function二、function1。为了防止这种现象，咱们能够在data-bind后附加clickBubble：false来阻止click事件继续向上传递，好比说咱们将代码改为这样：

1 <div data-bind="click: function1">
2     <div data-bind="click: function2">
3         <button data-bind="click: function3, clickBubble: false">Click me</button>
4     </div>
5 </div>

这样一来就只会触发function3。而若是咱们是在function2后面添加，则只会依次触发function3和function2，以此类推。