首页 > 代码库 > KnockoutJs学习笔记（九）
KnockoutJs学习笔记（九）
由于component binding部分的内容更为复杂一些，所以这部分我暂时跳过，先学习click binding部分。
click binding不仅可以作用于button、input、a等元素，也可以作用于其他任何可见的DOM元素。
下面是一个简单的例子：
html部分：
1 <div>2 You‘ve clicked <span data-bind="text: numberOfClicks"></span> times3 <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 me3 </button>
1 <button data-bind="click: myFunction.bind($data, ‘param1‘, ‘param2‘)">2 Click me3 </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，则会依次触发function3、function2、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，以此类推。
KnockoutJs学习笔记（九）