KnockoutJS 3.X API 第四章之click绑定
目的
click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。
例如：
You'veclicked0timesClickme
源码：
<div>
You'veclicked<spandata-bind="text:numberOfClicks"></span>times
<buttondata-bind="click:incrementClickCounter">Clickme</button>
</div>
<scripttype="text/javascript">
varviewModel={
numberOfClicks:ko.observable(0),
incrementClickCounter:function(){
varpreviousCount=this.numberOfClicks();
this.numberOfClicks(previousCount+1);
}
};
</script>
如上述例子，没点过button被点击时都会触发incrementClickCounter回调函数，从而更新视图状态。
备注，click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数，直接引用即可。例如：click:someObject.someFunction。
备注1：传递一个参数
当您的处理程序中，UI展示了一个监控属性数组，例如：
LondonRemove
ParisRemove
TokyoRemove
源码：
<uldata-bind="foreach:places">
<li>
<spandata-bind="text:$data"></span>
<buttondata-bind="click:$parent.removePlace">Remove</button>
</li>
</ul>
<scripttype="text/javascript">
functionMyViewModel(){
varself=this;
self.places=ko.observableArray(['London','Paris','Tokyo']);
//Thecurrentitemwillbepassedasthefirstparameter,soweknowwhichplacetoremove
self.removePlace=function(place){
self.places.remove(place)
}
}
ko.applyBindings(newMyViewModel());
</script>
当点击remove时只会删除当前的项目，从源码上看，说明传递的是当前项目。这种在渲染集合数据的时候特别有用。
需要注意两点：
如果你是一个嵌套在绑定上下文，例如，如果使用foreach或with绑定，但你的处理函数是根视图模型或其他一些父模型，你需要使用一个前缀，如$parent或$root定位处理函数。
在您的视图模型，但是这是可以使用self（或其他一些变量）作为this的一个别名。
备注2:传递事件对象(多参数)
一些情况下，你可能需要访问DOM的事件对象(event)，一般情况下KO会将事件对象作为第二个参数传递给函数。例如：
<buttondata-bind="click:myFunction">
Clickme
</button>
<scripttype="text/javascript">
varviewModel={
myFunction:function(data,event){
if(event.shiftKey){
//dosomethingdifferentwhenuserhasshiftkeydown
}else{
//donormalaction
}
}
};
ko.applyBindings(viewModel);
</script>
如果你要传递更多的参数，可以使用函数文本的方式。例如：
<buttondata-bind="click:function(data,event){myFunction('param1','param2',data,event)}">
Clickme
</button>
还有更优雅的写法，比如使用bind函数绑定多个参数。例如：
<buttondata-bind="click:myFunction.bind($data,'param1','param2')"> Clickme </button>
备注3：允许默认点击动作
默认情况下，Ko会阻止任何默认动作。比如你把click绑定到一个a标签上，当点击时，浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。
如果你不希望这种默认的阻止动作。可以在回调函数中返回true。
备注4：防止冒泡事件
默认情况下，KO允许click绑定继续到任何高级别的事件处理。例如，父元素和子元素都有click绑定，那么这两个元素的click绑定会都被触发。
可以使用一个附加绑定clickBubble来解决该问题：
<divdata-bind="click:myDivHandler"> <buttondata-bind="click:myButtonHandler,clickBubble:false"> Clickme </button> </div>
如上述例子，myButtonHandler将被调用，而附件绑定clickBubble，并设置了false，这至使父元素的myDivHandler不会被调用。
备注5：与Jquery互动
如果存在Jquery的click事件，KO将会去调用Jquery的click事件，如果你想总是使用自己本地的事件来处理，可以在ko.applyBindings中加入如下代码：
ko.options.useOnlyNativeEvents=true;
以上所述是小编给大家介绍的KnockoutJS3.XAPI第四章之click绑定，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！