在下拉列表中可使用 options 来绑定子项的值，子项既可以是字符串，也可以是 js 对象。上一篇（【Knockoutjs 学习体验之旅】（1）ko初体验）中展示的是字符串，这次就来传个对象：
代码：
<p>Your country: <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select> </p> <div data-bind="visible: selectedCountry"> <!-- Appears when you select something --> You have chosen a country with population <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>. </div> <script type="text/javascript"> // Constructor for an object with two properties var Country = function(name, population) { this.countryName = name; this.countryPopulation = population; }; var viewModel = { availableCountries: ko.observableArray([ new Country("UK", 65000000), new Country("USA", 320000000), new Country("Sweden", 29000000) ]), selectedCountry: ko.observable() // Nothing selected by default }; ko.applyBindings(viewModel); </script>
这里使用了option来绑定列表框的选项，使用value绑定选中项目。由于选项是 js 对象，所以要用一个 optionText 来指定在列表框中的展示。optionCaption是指无选中任何项目时候的默认显示值。如果我们设定的是多选列表框的话，那么就不能用 value 来绑定选中项目了，这个时候要用到 selectOptions来绑定选中项目。
（6）其他绑定：enable/disable, hasFocus , checked , uniqueName。
这些事件用起来非常简单，就不具体介绍了。最后一个 uniqueName 是用来设置表单控件的唯一 name 属性的，表单中提交到后台时，没有设置 name 属性的值时不会被提交到后台的，所以就有了这么个绑定功能。官网中关于 hasFoucus 还有个比较常用的效果：
Name:
Name: Bert Bertington
Click the name to edit it; click elsewhere to apply changes.
点击上面的姓名就可以变成可编辑状态，失去焦点后又变成普通文字，这种效果用ko实现起来相当简单。
总结
本篇主要简单介绍了knockoutjs中各种绑定的使用方法，使用这些绑定方法的组合就能简单地做好一个需要较多动态交互的UI页面。使用这些方法比较重要的一点就是要记住绑定的都是函数对象，所以可以直接在HTML里面进行操作，这样的话有时候 js 代码结构可以更简单。
您可能感兴趣的文章: