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

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 remove self.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>

还有更优雅的写法,比如使用bind函数绑定多个参数。例如:

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

备注3:允许默认点击动作

默认情况下,Ko会阻止任何默认动作。比如你把click绑定到一个a标签上,当点击时,浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。

如果你不希望这种默认的阻止动作。可以在回调函数中返回true。

备注4:防止冒泡事件

默认情况下,KO允许click绑定继续到任何高级别的事件处理。例如,父元素和子元素都有click绑定,那么这两个元素的click绑定会都被触发。

可以使用一个附加绑定clickBubble来解决该问题:

<div data-bind="click: myDivHandler"> <button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button> </div>

如上述例子,myButtonHandler将被调用,而附件绑定clickBubble,并设置了false,这至使父元素的myDivHandler不会被调用。

备注5:与Jquery互动

如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:

ko.options.useOnlyNativeEvents = true;

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之click绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdpgd.html