Javascript MVVM模式前端框架—Knockout 2.1.0系列(10)：内建绑定之——Event绑定

*本文已经同步至索引目录：http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html

前言&基础

 

有了上一节的基础，今天我们看一个相对比较好理解，也比较重要的binding:event事件绑定。它提供了内置事件绑定之外的给DOM元素添加事件处理函数的机制。

正文

Event Binding

• 绑定DOM元素的指定事件到指定的函数。
• ko默认会将当前绑定的viewModel的上下文对象作为第1个参数传入处理函数。
• ko会将Dom的event对象作为第2个参数传入

 

实例讲解：Event Binding

基本语法

Html代码

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        Mouse over me
    </div>
    <div data-bind="visible: detailsEnabled">
        Details
    </div>
</div>

 

Js代码

 var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel);

 

Demo1：演示Event Binding基本用法

http://jsfiddle.net/wbpmrck/PWVkx/1/embedded/

看不到内嵌Demo的点这里查看在线Demo

 

Demo2：演示获取DOM事件参数、自定义参数

http://jsfiddle.net/wbpmrck/PWVkx/2/embedded/

看不到内嵌Demo的点这里查看在线Demo

 

总结

今天主要介绍了ko中的Event Binding用法，其实ko里所有的事件绑定都可以用它来搞定，是不是很简单呢~。

感谢支持

精彩的还在后面，请大家多多支持，给点动力哈~

如果本文对您有帮助的话，请别吝啬手中的推荐票哦~