Knockout应用开发指南 第三章：绑定语法（2）
7 click 绑定
目的
click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。
例子
<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>
每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。
参数
主参数
Click点击事件时所执行的函数。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： someObject.someFunction。
View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写incrementClickCounter 就可以了，而无需写成： viewModel.incrementClickCounter（尽管是合法的）。
其它参数
无
注1：传参数给你的click 句柄
最简单的办法是传一个function包装的匿名函数：
<button data-bind="click: function() { viewModel.myFunction('param1', 'param2') }">
Click me
</button>
这样，KO就会调用这个匿名函数，里面会执行viewModel.myFunction()，并且传进了'param1' 和'param2'参数。
注2：访问事件源对象
有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：
<button data-bind="click: myFunction">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function (event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
</script>
如果你需要的话，可以使用匿名函数的第一个参数传进去，然后在里面调用：
<button data-bind="click: function(event) { viewModel.myFunction(event, 'param1', 'param2') }">
Click me
</button>
这样，KO就会将事件源对象传递给你的函数并且使用了。
注3: 允许执行默认事件
默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，如果你点击一个a连接，在执行完自定义事件时它不会连接到href地址。这特别有用是因为你的自定义事件主要就是操作你的view model，而不是连接到另外一个页面。
当然，如果你想让默认的事件继续执行，你可以在你click的自定义函数里返回true。
注4：控制this句柄
初学者可以忽略这小节，因为大部分都用不着，高级用户可以参考如下内容：
KO在调用你定义的函数时，会将view model传给this对象（也就是ko.applyBindings使用的view model）。主要是方便你在调用你在view model里定义的方法的时候可以很容易再调用view model里定义的其它属性。例如： this.someOtherViewModelProperty。
如果你想引用其它对象，我们有两种方式：
- 你可以和注1里那样使用匿名函数，因为它支持任意JavaScript 对象。
- 你也可以直接引用任何函数对象。你可以使用bind使callback函数设置this为任何你选择的对象。例如：
<button data-bind="click: someObject.someFunction.bind(someObject)">
Click me
</button>
如果你是C#或Java开发人员，你可以疑惑为什么我们还要用bind函数到一个对象想，特别是像调用someObject.someFunction。 原因是在JavaScript里，函数自己不是类的一部分，他们在单独存在的对象，有可能多个对象都引用同样的someFunction函数，所以当这个函数被调用的时候它不知道谁调用的（设置this给谁）。在你bind之前运行时是不会知道的。KO默认情况下设置this对象是view model，但你可以用bind语法重定义它。
在注1里使用匿名函数的时候没有具体的要求，因为JavaScript代码 someObject.someFunction()就意味着调用someFunction，然后设置this到 someObject对象上。
注5：防止事件冒泡
默认情况下，Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了click事件，那当你点击该元素的时候两个事件都会触发的。如果需要，你可以通过额外的绑定clickBubble来禁止冒泡。例如：
<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>
默认情况下，myButtonHandler会先执行，然后会冒泡执行myDivHandler。但一旦你设置了clickBubble为false的时候，冒泡事件会被禁止。
依赖性
除KO核心类库外，无依赖。
8 event 绑定
目的
event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。
例子
<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);
}
};
</script>
每次鼠标在第一个元素上移入移出的时候都会调用view model上的方法来toggle detailsEnabled的值，而第二个元素会根据detailsEnabled的值自动显示或者隐藏。
参数
主参数
你需要传入的是一个JavaScript对象，他的属性名是事件名称，值是你所需要执行的函数。
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： event: { mouseover: someObject.someFunction }。
View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写event: { mouseover: enableDetails } 就可以了，而无需写成： event: { mouseover: viewModel.enableDetails }（尽管是合法的）。
其它参数
无
注1：传参数给你的click 句柄
最简单的办法是传一个function包装的匿名函数：
<button data-bind="event: { mouseover: function() { viewModel.myFunction('param1', 'param2') } }">
Click me
</button>
这样，KO就会调用这个匿名函数，里面会执行viewModel.myFunction()，并且传进了'param1' 和'param2'参数。
注2：访问事件源对象
有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：
<div data-bind="event: { mouseover: myFunction }">
Mouse over me
</div>
<script type="text/javascript">
var viewModel = {
myFunction: function (event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
</script>
如果你需要的话，可以使用匿名函数的第一个参数传进去，然后在里面调用：
<div data-bind="event: { mouseover: function(event) { viewModel.myFunction(event, 'param1', 'param2') } }">
Mouse over me
</div>
这样，KO就会将事件源对象传递给你的函数并且使用了。
注3: 允许执行默认事件
默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，如果在一个input标签上绑定一个keypress事件，当你输入内容的时候，浏览器只会调用你的函数而不是天价你输入的值。另外一个例子click绑定，当你点击一个a连接，在执行完自定义事件时它不会连接到href地址。因为你的自定义事件主要就是操作你的view model，而不是连接到另外一个页面。
当然，如果你想让默认的事件继续执行，你可以在你event的自定义函数里返回true。
注4：控制this句柄
初学者可以忽略这小节，因为大部分都用不着，高级用户可以参考如下内容：
KO在调用你定义的event绑定函数时，会将view model传给this对象（也就是ko.applyBindings使用的view model）。主要是方便你在调用你在view model里定义的方法的时候可以很容易再调用view model里定义的其它属性。例如： this.someOtherViewModelProperty。
如果你想引用其它对象，我们有两种方式：
- 你可以和注1里那样使用匿名函数，因为它支持任意JavaScript 对象。
- 你也可以直接引用任何函数对象。你可以使用bind使callback函数设置this为任何你选择的对象。例如：
<div data-bind="event: { mouseover: someObject.someFunction.bind(someObject) }">
Mouse over me
</div>
如果你是C#或Java开发人员，你可以疑惑为什么我们还要用bind函数到一个对象想，特别是像调用someObject.someFunction。 原因是在JavaScript里，函数自己不是类的一部分，他们在单独存在的对象，有可能多个对象都引用同样的someFunction函数，所以当这个函数被调用的时候它不知道谁调用的（设置this给谁）。在你bind之前运行时是不会知道的。KO默认情况下设置this对象是view model，但你可以用bind语法重定义它。
在注1里使用匿名函数的时候没有具体的要求，因为JavaScript代码 someObject.someFunction()就意味着调用someFunction，然后设置this到 someObject对象上。
注5：防止事件冒泡
默认情况下，Knockout允许event事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了mouseover事件，那么如果你的鼠标在该元素移动的时候两个事件都会触发的。如果需要，你可以通过额外的绑定youreventBubble来禁止冒泡。例如：
<div data-bind="event: { mouseover: myDivHandler }">
<button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
Click me
</button>
</div>
默认情况下，myButtonHandler会先执行，然后会冒泡执行myDivHandler。但一旦你设置了mouseoverBubble为false的时候，冒泡事件会被禁止。
依赖性
除KO核心类库外，无依赖。
9 submit 绑定
目的
submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。
当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个，使用submit绑定就是为了处理view model的自定义函数的，而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作，你可以在你的submit句柄里返回true。
例子
<form data-bind="submit: doSomething">
... form contents go here ...
<button type="submit">Submit</button>
</div>
<script type="text/javascript">
var viewModel = {
doSomething: function (formElement) {
// ... now do something
}
};
</script>
这个例子里，KO将把整个form表单元素作为参数传递到你的submit绑定函数里。 你可以忽略不管，但是有些例子里是否有用，参考：ko.postJson工具。
为什么不在submit按钮上使用click绑定？
在form上，你可以使用click绑定代替submit绑定。不过submit可以handle其它的submit行为，比如在输入框里输入回车的时候可以提交表单。
参数
主参数
你绑定到submit事件上的函数
你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： submit: someObject.someFunction。
View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写submit: doSomething就可以了，而无需写成： submit: viewModel. doSomething（尽管是合法的）。
其它参数
无
备注：
关于如果传递更多的参数给submit绑定函数，或者当调用非view model里的函数的时如何控制this，请参考click绑定。所有click绑定相关的notes也都适用于submit绑定。
依赖性
除KO核心类库外，无依赖。
10 enable 绑定
目的
enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。
例子
<p>
<input type='checkbox' data-bind="checked: hasCellphone"/>
I have a cellphone
</p>
<p>
Your cellphone number:
<input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone"/>
</p>
<script type="text/javascript">
var viewModel = {
hasCellphone: ko.observable(false),
cellphoneNumber: ""
};
</script>
这个例子里，“Your cellphone number”后的text box 初始情况下是禁用的，只有当用户点击标签 “I have a cellphone”的时候才可用。
参数
主参数
声明DOM元素是否可用enabled。
非布尔值会被解析成布尔值。例如0和null被解析成false，21和非null对象被解析给true。
如果你的参数是observable的，那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是，则只会设置一次并且以后不再更新。
其它参数
无
注：任意使用JavaScript表达式
不紧紧限制于变量 – 你可以使用任何JavaScript表达式来控制元素是否可用。例如,
<button data-bind="enabled: parseAreaCode(viewModel.cellphoneNumber()) != '555'">
Do something
</button>
依赖性
除KO核心类库外，无依赖。
11 disable 绑定
目的
disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input，select，和textarea上非常有用。
disable绑定和enable绑定正好相反，详情请参考enable绑定。