标签：style blog java color 使用 数据
Click 绑定器可以将javascript函数绑定到指定的dom元素，并且再该元素被点击时将触发绑定的函数，大多数情况下都会使用button、input和a元素，当然其他可见的dom元素也是一样可以的。下面我们就简单的举一个例子：
1 <div> 2 你已经点击了<span data-bind="text:numberOfClicks" ></span> 3 <button data-bind="click: incremmentClickCounter">点击</button> 4 </div> 5 6 <script type="text/javascript"> 7 8 var appViewModel = { 9 numberOfClicks: ko.observable(0), 10 incremmentClickCounter: function () { 11 var t = this.numberOfClicks(); 12 this.numberOfClicks(t + 1); 13 } 14 } 15 16 ko.applyBindings(appViewModel); 17 </script>
每次点击按钮，都可以发现对应的数值在不断的递增，当然还有就是在foreach绑定下，使用$parent.xxxxx指定click绑定的函数时，将会把当前这条数据作为第一个参数传递给指定的函数，比如下面我们可以通过这种方式来删除数据：
1 <ul data-bind="foreach:places" > 2 <li> 3 <span data-bind="text:$data" ></span> 4 <button data-bind="click: $parent.removePlace">删除</button> 5 </li> 6 </ul> 7 8 <script type="text/javascript"> 9 10 var appViewModel = function(){ 11 var self = this; 12 this.places = ko.observableArray([‘London‘,‘Paris‘,‘Tokyo‘]); 13 this.removePlace = function (data) { 14 self.places.remove(data); 15 } 16 } 17 18 ko.applyBindings(new appViewModel()); 19 </script>
通过点击删除按钮，将可以删除对应的项。学过监控数组的还知道另一个方法，就是可以不删除数据，但是会为这条数据设置标记，同时在foreach中也不会显示，主要是方面我们与服务器端进行同步。
具备一定javascript基础的读者应该知道事件还会传递一个event参数，而这个参数包含了事件更多具体的参数，当然我们在ko下一样可以使用，比如我们将上面的代码改写。只有按下shift并点击才可以删除：
1 var appViewModel = function(){ 2 var self = this; 3 this.places = ko.observableArray([‘London‘,‘Paris‘,‘Tokyo‘]); 4 this.removePlace = function (data, event) { 5 if (event.shiftKey) 6 self.places.remove(data); 7 } 8 }
现在我们只有通过按下shift并点击删除才可以删除这条数据了。
如果你需要更多的参数那么你可以写成如下所示的方式：
1 <button data-bind="click: function(data, event) { myFunction(‘param1‘, ‘param2‘, data, event) }"> 2 点击 3 </button>
这样当点击这个按钮之后，将会指定myFunction并将param1、param2以及默认的参数传递给函数，这对于需要将一个事件按照不同的情况复用的时候很有用。
提示：ko将会阻止设置了click绑定器元素的默认行为，比如a标签，如果设置了click绑定器则不会导致跳转到href所指定的页面，如果不想阻止默认行为可以在函数中返回true即可。关于冒泡事件，ko也给我们提供了解决方案，默认情况下ko不会阻止，如果我们需要阻止冒泡可以按照如下的方式设置clickBubble：
1 <div data-bind="click: myDivHandler"> 2 <button data-bind="click: myButtonHandler, clickBubble: false"> 3 点我 4 </button> 5 </div>
上面的例子，当我们点击了div内的button将不会导致div的发生点击事件。
页面中不可能仅仅只存在点击事件，当然还存在其他很多事件，但是都不是很常用，所以ko就提供了一个event可以帮助我们给其他事件绑定函数，当然具体的赋值方式跟click一样，比如下面我们可以div的mouseover和mouseout绑定监听事件（事件可以自行写，没有限制）：
1 <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> 2 碰我 3 </div>
当我们的鼠标移动到上面就会导致执行enableDetails函数，当离开之后则会执行disableDetails函数，当然还可以设置其他更多的事件（keypress,mouseover,mouseout）。
顾名思义，就是用来绑定表单的提交事件的，当然这个绑定器可不是绑定在按钮上的，而是直接绑定到一个表单中。比如下面的代码：
1 <form action="~/Views/Home/Index" data-bind="submit: formSubmit"> 2 <input type="text" name="a" /> 3 <button type="submit">提交</button> 4 </form> 5 6 <script type="text/javascript"> 7 8 var appViewModel = function () { 9 var self = this; 10 this.formSubmit = function (formelement) { 11 var t = formelement; 12 } 13 } 14 15 ko.applyBindings(new appViewModel()); 16 </script>
formSubmit中的formelement将指向该表单元素，当然ko默认会阻止表单的提交，如果需要取消这个默认行为，可以在函数中返回true即可。
顾名思义，利用这个绑定器可以控制表单元素是否启用，如果下面的代码将可以控制输入框是否可用：
1 <input type="text" data-bind="enable:isShow" /> 2 <button type="button" data-bind="click:formSubmit" >开关</button> 3 4 <script type="text/javascript"> 5 6 var appViewModel = function () { 7 var self = this; 8 this.isShow = ko.observable(true); 9 this.formSubmit = function () { 10 self.isShow(!self.isShow()); 11 } 12 } 13 14 ko.applyBindings(new appViewModel()); 15 </script>
输入框一开始是可以输入的，点击了按钮之后输入狂将会被禁用，基本上它的功能就这些了，另外一个就是 disable 绑定器，在满足条件时将禁用指定的标签。
Value绑定器将会把你的视图模型中的属性与DOM元素中的value关联。可以使用于表单元素，如<input>、<select>和<textarea>。当用户修改了关联DOM元素中的值将会自动更新视图模型中关联的属性，相反如果你修改了视图模型中的属性，那么DOM元素中显示的值也会跟着变动。
比如下面的例子：
1 <div> 2 <label for="username">username:</label> 3 <input id="username" type="text" data-bind="value: username" /> 4 </div> 5 <div> 6 <label for="password">password:</label> 7 <input id="password" type="text" data-bind="value: password" /> 8 </div> 9 <div> 10 <button type="button" data-bind="click: showInfo">showInfo</button> 11 </div> 12 13 <script type="text/javascript"> 14 15 var appViewModel = function () { 16 var self = this; 17 this.username = ko.observable("请输入"); 18 this.password = ko.observable(""); 19 this.showInfo = function () { 20 alert(self.username() + ":" + self.password()); 21 }; 22 } 23 24 ko.applyBindings(new appViewModel()); 25 </script>
如果你关联的视图模型中的属性是对象或者数组那么KO就会使用toString的值。所以建议使用字符串或者数值类型。当用户修改了文本框中的值，并转移了焦点KO才会更新视图模型（就是change事件），当然我们可以使用valueUpdate修改这一行为。
valueUpdate可以接受如下的值：
“input” ：当<input>或<textarea>标签中的值改变将会更新视图模型中的值（支持IE9+）。
“keyup” ：当用户释放了一个键将会更新视图模型中的值。
“keypress” ：当用户完成一个字符输入时将更新视图模型中的值。
“afterkeydown” ：当用户按下一个键的同时将会更新视图模型中的值。
比如下面的例子将可以实时的显示用户输入的值：
1 <div> 2 <input type="text" data-bind="value: realvalue,valueUpdate:‘input‘" /> 3 <label data-bind="text: realvalue"></label> 4 </div> 5 6 <script type="text/javascript"> 7 8 var appViewModel = function () { 9 var self = this; 10 this.realvalue = ko.observable(""); 11 } 12 13 ko.applyBindings(new appViewModel()); 14 </script>
Knockout学习之表单绑定器（上）,布布扣,bubuko.com
标签：style blog java color 使用 数据
原文地址：http://www.cnblogs.com/yaozhenfa/p/knockout_6.html
