Knockoutjs属性绑定(Bindings)之表单处理(Working with form fields)
我们在使用Knockoutjs最多的时候莫过于使用上次介绍的流程控制(Control flow)和今天将要介绍的表单处理(Working with form fields)了，我们使用表单处理可以帮助我们处理比如事件、验证等功能，下面我们就开始吧。
一、click binding
使用click binding可以对某一个可见的DOM元素进行事件绑定，当用户点击这个元素时会执行对应的方法，完成相应的功能，我们经常在button、input、a等DOM元素上进行click binding。
（1）、下面我们来看一个例子：每当我点击Button之后，点击次数都会加1
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <div> 4 You've clicked <span data-bind="text: numberOfClicks"></span> times 5 <button data-bind="click: incrementClickCounter">Click me</button> 6 </div> 7 8 <script type="text/javascript"> 9 var viewModel = { 10 numberOfClicks: ko.observable(0), 11 incrementClickCounter: function () { 12 var previousCount = this.numberOfClicks(); 13 this.numberOfClicks(previousCount + 1); 14 } 15 }; 16 ko.applyBindings(viewModel); 17 </script>
（2）、我们也可以把当前元素作为参数传递给所要调用的方法，如下例子：我们点击按钮，然后删除按钮对应的元素
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <ul data-bind="foreach: places"> 4 <li> 5 <span data-bind="text: $data"></span> 6 <button data-bind="click: $parent.removePlace">Remove</button> 7 </li> 8 </ul> 9 10 <script type="text/javascript"> 11 function MyViewModel() { 12 var self = this; 13 self.places = ko.observableArray(['London', 'Paris', 'Tokyo']); 14 15 // The current item will be passed as the first parameter, so we know which place to remove 16 self.removePlace = function (place) { 17 self.places.remove(place) 18 } 19 } 20 ko.applyBindings(new MyViewModel()); 21 </script>
关于这个例子我们有以下的两点说明：
（a）、如果我们在一个嵌套的元素中使用click binding的话，例如我们在foreach或者with块中使用click binding，但是此时click对应的方法在View Model的根部或者他的父上下文，此时我们需要一个前缀比如$parent或者$root来定位我们的方法。
（b）、在我们的View Model中我们经常为我们的this起一个别名为self，这样就会防止this指向的地方改变而导致我们程序的错误。
（3）、定义事件对象和传递更多的参数
（a）、定义一个事件
1 <button data-bind="click: myFunction"> 2 Click me 3 </button> 4 5 <script type="text/javascript"> 6 var viewModel = { 7 myFunction: function(data, event) { 8 if (event.shiftKey) { 9 //do something different when user has shift key down 10 } else { 11 //do normal action 12 } 13 } 14 }; 15 ko.applyBindings(viewModel); 16 </script>
此时就会判断，如果是shift 键点击的话，则会执行对应的内容，否则执行其他的内容。
（b）、传递更多的参数
如果我们想要传递很多参数给调用的方法的话，我们可以在标签中包括对应方法要传递的参数等，如下：
1 <button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }"> 2 Click me 3 </button>
但是，如果我们不想要在标签中出现这么多的内容的话，我们可以使用KO的bind方法来进行方法的传递，如下：
1 <button data-bind="click: myFunction.bind($data, 'param1', 'param2')"> 2 Click me 3 </button>
（4）、防止事件的冲突
在默认情况下，Knockoutjs允许事件绑定从一个元素传递到更高一级的元素。比如：一个DOM元素和他的父元素都使用了click事件，如果我们点击其中一个则两个事件都会执行，此时，我们就可以使用“clickBubble”来制定哪个事件不执行，如下：
1 <div data-bind="click: myDivHandler"> 2 <button data-bind="click: myButtonHandler, clickBubble: false"> 3 Click me 4 </button> 5 </div>
在默认的情况下，当点击事件时会首先执行myButtonHandler，然后执行myDivHandler。但是当我们在button上使用的clickBubble:false时，则会跳过myButtonHandler去执行myDivHandler了。
二、event binding
我们也可以使用event binding来进行事件绑定，比如：keypress, mouseover 、 mouseout等
（1）、使用mouseover和mouseout控制是否显示div
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <div> 4 <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> 5 Mouse over me 6 </div> 7 <div data-bind="visible: detailsEnabled"> 8 Details 9 </div> 10 </div> 11 12 <script type="text/javascript"> 13 var viewModel = { 14 detailsEnabled: ko.observable(false), 15 enableDetails: function () { 16 this.detailsEnabled(true); 17 }, 18 disableDetails: function () { 19 this.detailsEnabled(false); 20 } 21 }; 22 ko.applyBindings(viewModel); 23 </script>
（2）、参数传递
当使用event binding的时候，Knockoutjs会默认将当前的Model Value作为第一个参数传递给事件方法。如下：
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <ul data-bind="foreach: places"> 4 <li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }"> </li> 5 </ul> 6 <p>You seem to be interested in: <span data-bind="text: lastInterest"> </span></p> 7 8 <script type="text/javascript"> 9 function MyViewModel() { 10 var self = this; 11 self.lastInterest = ko.observable(); 12 self.places = ko.observableArray(['London', 'Paris', 'Tokyo']); 13 14 // The current item will be passed as the first parameter, so we know which place was hovered over 15 self.logMouseOver = function (place) { 16 self.lastInterest(place); 17 } 18 } 19 ko.applyBindings(new MyViewModel()); 20 </script>
（3）、传递多个参数
在进行多个参数传递时，我们可以参照click binding中的多个参数传递，如下：
1 <div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }"> 2 Mouse over me 3 </div>
我们也可以使用下面的方法进行多个参数的传递：
1 <button data-bind="event: { mouseover: myFunction.bind($data, 'param1', 'param2') }"> 2 Click me 3 </button>
（4）、同样的在event binding中也会有事件的冲突，在click binding中我们使用clickBubble来处理，如果我们要mouseover事件的话我们可以使用mouseoverBubble来处理，如果使用mouseout的话我们可以使用mouseoutBubble来处理等等。
三、submit binding
我们可以使用submit binding进行表单的提交，但我们要注意此时并没有将表单提交给服务器，而是提交给了我们的View Model。使用submit binding的示例如下：
1 <form data-bind="submit: doSomething"> 2 ... form contents go here ... 3 <button type="submit">Submit</button> 4 </div> 5 6 <script type="text/javascript"> 7 var viewModel = { 8 doSomething : function(formElement) { 9 // ... now do something 10 } 11 }; 12 </script>
四、enable binding
使用enable binding可以很好的控制DOM元素是否显示等（当enable的值为true时），这对input, select, textarea等特别的有用。下面我们来看一个例子：我们定义一个checkbox和一个text，当用户勾选checkbox以后才能在text中输入内容，否则不能输入：
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p> 4 <input type='checkbox' data-bind="checked: hasCellphone" /> 5 I have a cellphone 6 </p> 7 <p> 8 Your cellphone number: 9 <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" /> 10 </p> 11 12 <script type="text/javascript"> 13 var viewModel = { 14 hasCellphone: ko.observable(false), 15 cellphoneNumber: "" 16 }; 17 ko.applyBindings(viewModel); 18 </script>
五、disable binding
disable binding的使用方法和enable binding的使用方法一样，只是判断条件相反。
六、value binding
我们可以使用value binding为DOM元素设置默认值，比如：我们使用value为其设置默认的用户名和密码
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p>Login name: <input data-bind="value: userName" /></p> 4 <p>Password: <input type="password" data-bind="value: userPassword" /></p> 5 6 <script type="text/javascript"> 7 var viewModel = { 8 userName: ko.observable("123456"), // Initially blank 9 userPassword: ko.observable("abc"), // Prepopulate 10 }; 11 ko.applyBindings(viewModel); 12 </script>
七、hasfocus binding
在使用hasfocus binding时，我们可以通过View Model层为一个元素设置true和false来控制hasfocus，也可以在View层对某一个元素进行绑定。
例1：当input获得焦点时则会显示相应的文本
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <input data-bind="hasfocus: isSelected" /> 4 <button data-bind="click: setIsSelected">Focus programmatically</button> 5 <span data-bind="visible: isSelected">The textbox has focus</span> 6 7 <script type="text/javascript"> 8 var viewModel = { 9 isSelected: ko.observable(false), 10 setIsSelected: function () { this.isSelected(true) } 11 }; 12 ko.applyBindings(viewModel); 13 </script>
例2：点击文本后即可进行编辑
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p> 4 Name: 5 <b data-bind="visible: !editing(), text: name, click: edit"> </b> 6 <input data-bind="visible: editing, value: name, hasfocus: editing" /> 7 </p> 8 <p><em>Click the name to edit it; click elsewhere to apply changes.</em></p> 9 10 <script type="text/javascript"> 11 function PersonViewModel(name) { 12 // Data 13 this.name = ko.observable(name); 14 this.editing = ko.observable(false); 15 16 // Behaviors 17 this.edit = function () { this.editing(true) } 18 } 19 20 ko.applyBindings(new PersonViewModel("Bert Bertington")); 21 </script>
八、checked binding
（1）、checkbox使用
1 <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> 2 <div data-bind="visible: wantsSpam"> 3 Preferred flavors of spam: 4 <div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div> 5 <div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div> 6 <div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div> 7 </div> 8 9 <script type="text/javascript"> 10 var viewModel = { 11 wantsSpam: ko.observable(true), 12 spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes 13 }; 14 15 // ... then later ... 16 viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox 17 </script>
（2）、radio使用
1 <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> 2 <div data-bind="visible: wantsSpam"> 3 Preferred flavor of spam: 4 <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div> 5 <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div> 6 <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div> 7 </div> 8 9 <script type="text/javascript"> 10 var viewModel = { 11 wantsSpam: ko.observable(true), 12 spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button 13 }; 14 15 // ... then later ... 16 viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked 17 </script>
九、options binding
使用options binding可以实现我们的下拉列表框，下面我们看几个例子：
（1）、一个简单的下拉列表
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p>Destination country: <select data-bind="options: availableCountries"></select></p> 4 5 <script type="text/javascript"> 6 var viewModel = { 7 availableCountries: ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options 8 }; 9 10 // ... then later ... 11 viewModel.availableCountries.push('China'); // Adds another option 12 ko.applyBindings(viewModel); 13 </script>
（2）、多选列表框
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p>Destination country: <select data-bind="options: availableCountries" size="5" multiple="true"></select></p> 4 5 <script type="text/javascript"> 6 var viewModel = { 7 availableCountries: ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options 8 }; 9 10 // ... then later ... 11 viewModel.availableCountries.push('China'); // Adds another option 12 ko.applyBindings(viewModel); 13 </script>
（3）、使用JavaScript对象来作为下拉列表的内容
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p> 4 Your country: 5 <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select> 6 </p> 7 8 <div data-bind="visible: selectedCountry"> <!-- Appears when you select something --> 9 You have chosen a country with population 10 <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>. 11 </div> 12 13 <script type="text/javascript"> 14 // Constructor for an object with two properties 15 var Country = function (name, population) { 16 this.countryName = name; 17 this.countryPopulation = population; 18 }; 19 20 var viewModel = { 21 availableCountries: ko.observableArray([ 22 new Country("UK", 65000000), 23 new Country("USA", 320000000), 24 new Country("Sweden", 29000000) 25 ]), 26 selectedCountry: ko.observable() // Nothing selected by default 27 }; 28 ko.applyBindings(viewModel); 29 </script>
十、selectedOptions binding
实现多选列表框的默认选中，例：
1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p> 4 Choose some countries you'd like to visit: 5 <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select> 6 </p> 7 8 <script type="text/javascript"> 9 var viewModel = { 10 availableCountries: ko.observableArray(['France', 'Germany', 'Spain']), 11 chosenCountries: ko.observableArray(['Germany']) // Initially, only Germany is selected 12 }; 13 14 // ... then later ... 15 viewModel.chosenCountries.push('France'); // Now France is selected too 16 ko.applyBindings(viewModel); 17 </script>