knockout学习之绑定事件2
1 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); } };
ko.applyBindings(viewModel);
</script>
每次点击按钮的时候，都会调用 incrementClickCounter()函数，然后更新自动 更新点击次数。
参数
主参数
Click 点击事件时所执行的函数。
你可以声明任何 JavaScript 函数 – 不一定非要是 view model 里的函 数。你可以声明任意对象上的任何函数，例如： someObject.someFunction。
View model 上的函数在用的时候有一点点特殊，就是不需要引用对象的， 直接引用函数本身就行了，比如直接写 incrementClickCounter 就可以了，而 无需写成： viewModel.incrementClickCounter（尽管是合法的）。
2 event 绑定
目的
event 绑定在 DOM 元素上添加指定的事件句柄以便元素被触发的时候执行定义的 JavaScript 函数。大部分情况下是用在 keypress，mouseover 和 mouseout 上。
例子
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Text9</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockoutjs.2.1.0/Content/Scripts/knockout-2.1.0.debug.js"></script>
<script src="~/Scripts/knockoutjs.2.1.0/Content/Scripts/knockout-2.1.0.js"></script>
</head>
<body>
<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>
</body>
</html>
每次鼠标在第一个元素上移入移出的时候都会调用 view model 上的方法来 toggle detailsEnabled 的值，而第二个元素会根据 detailsEnabled 的值自动 显示或者隐藏。
参数
主参数
你需要传入的是一个 JavaScript 对象，他的属性名是事件名称，值是你 所需要执行的函数。
你可以声明任何 JavaScript 函数 – 不一定非要是 view model 里的函 数。你可以声明任意对象上的任何函数，例如： event: { mouseover: someObject.someFunction }。
View model 上的函数在用的时候有一点点特殊，就是不需要引用对象的， 直接引用函数本身就行了，比如直接写 event: { mouseover: enableDetails }
就可以了，而无需写成： event: { mouseover: viewModel.enableDetails }
3 submit 绑定
目的
submit 绑定在 form 表单上添加指定的事件句柄以便该 form 被提交的时候执行 定义的 JavaScript 函数。只能用在表单 form 元素上。
当你使用 submit 绑定的时候， Knockout 会阻止 form 表单默认的 submit 动作。 换句话说，浏览器会执行你定义的绑定函数而不会提交这个 form 表单到服务器 上。可以很好地 解释这个，使用 submit 绑定就是为了处理 view model 的自定 义函数的，而不是再使用普通的 HTML form 表单。如果你要继续执行默认的 HTML form 表单操作，你可以在你的 submit 句柄里返回 true。
例子
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Text10</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockoutjs.2.1.0/Content/Scripts/knockout-2.1.0.debug.js"></script>
<script src="~/Scripts/knockoutjs.2.1.0/Content/Scripts/knockout-2.1.0.js"></script>
</head>
<body>
<form data-bind="submit: doSomething">
... form contents go here ...
<button type="submit">Submit</button>
<script type="text/javascript">
var viewModel = {
doSomething: function (formElement) {
// ... now do something
alert("提交成功");
}
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
这个例子里，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 绑定。
4 enable 绑定
目的
enable 绑定使 DOM 元素只有在参数值为 true 的时候才 enabled。在 form 表单 元素 input，select，和 textarea 上非常有用。
例子
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Text11</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockoutjs.2.1.0/Content/Scripts/knockout-2.1.0.debug.js"></script>
<script src="~/Scripts/knockoutjs.2.1.0/Content/Scripts/knockout-2.1.0.js"></script>
</head>
<body>
<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: ""
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
这个例子里，“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 核心类库外，无依赖。
5 disable 绑定
目的
disable 绑定使 DOM 元素只有在参数值为 true 的时候才 disabled。在 form 表 单元素 input，select，和 textarea 上非常有用。
disable 绑定和 enable 绑定正好相反，详情请参考 enable 绑定
