这里有新鲜出炉的精品教程,程序狗速度看过来!
Knockout 是个 JavaScript library,帮助创建丰富的显示和编辑器 UI,通过干净的底层数据模型。你可以在任何时候动态更新 UI 的选择部分。
event 绑定即为事件绑定,即当触发相关 DOM 事件的时候回调函数, 这篇文章主要介绍了 KnockoutJS 3.X API 第四章之事件 event 绑定的相关知识,感兴趣的朋友一起看看吧
目的
event 绑定即为事件绑定,即当触发相关 DOM 事件的时候回调函数。例如 keypress,mouseover 或者 mouseout 等
例如:
Mouse over me
源码:
- <div>
- <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
- Mouse over me
- </div>
- <div data-bind="visible: detailsEnabled">
- Details
- </div>
- </div>
- <script type="text/javascript">
- var viewModel = {
- detailsEnabled: ko.observable(false),
- enableDetails: function() {
- this.detailsEnabled(true);
- },
- disableDetails: function() {
- this.detailsEnabled(false);
- }
- };
- ko.applyBindings(viewModel);
- </script>
如上述例子,当鼠标指针移入或者移出 Mouse over me 时,对于 detailsEnabled 的值设定 true 或者 false。进而控制 Details 的显示和隐藏。
和 click 一样,event 后边所跟的格式一般为:event {mouseover: someObject.someFunction},其中的回调函数并不一定非要是视图模型的函数,他可以时任何对象的函数。
备注 1:传递一个当前项目作为参数
London Paris Tokyo You seem to be interested in:
源码:
- <ul data-bind="foreach: places">
- <li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }">
- </li>
- </ul>
- <p>
- You seem to be interested in:
- <span data-bind="text: lastInterest">
- </span>
- </p>
- <script type="text/javascript">
- function MyViewModel() {
- var self = this;
- self.lastInterest = ko.observable();
- self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
- // The current item will be passed as the first parameter, so we know which place was hovered over
- self.logMouseOver = function(place) {
- self.lastInterest(place);
- }
- }
- ko.applyBindings(new MyViewModel());
- </script>
需要注意,如果你使用的是嵌套绑定上下文,比如 foreach 或者 with,而需要处理的回调函数在视图模型中或者在父模型中,需要使用 $parent 或者 $root 前缀来进行绑定
与 click 绑定一样,给 this 取个别名比较好。
备注 2:传递多个参数
此处请参考 click 绑定:
- <div data-bind="event: { mouseover: myFunction }">
- Mouse over me
- </div>
- <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>
封装多参数示例:
- <div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }">
- Mouse over me
- </div>
使用 bind 函数示例:
- <button data-bind="event: { mouseover: myFunction.bind($data, 'param1', 'param2') }">
- Click me
- </button>
备注 3:允许默认动作
同 click 绑定一样,ko 禁止默认动作,比如你将 event 的 keypress 事件绑定到一个 Input 元素上,那这个 input 元素输入的值将会被 keypress 回调占用而无法输入任何信息。解决方案很简单,就是在回调函数中返回 true 即可。
备注 4:防止冒泡事件
如果要防止冒泡事件,可以直接在事件绑定后附加一个 youreventBubble 绑定。将该附加绑定设置为 false 则禁止冒泡事件的发生,例如:
- <div data-bind="event: { mouseover: myDivHandler }">
- <button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
- Click me
- </button>
- </div>
备注 5:Jquery 互动
以上所述是小编给大家介绍的 KnockoutJS 3.X API 第四章之事件 event 绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0527/331322.html