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，以此類推。