options绑定用来绑定select控件的option项，它只能用在select元素中，并且绑定值必须为数组。对于单选的下拉列表，选中值用value绑定；对于多选的列表，选中值用selectedOptions绑定。

示例代码

单选列表

//.W片段
<p>
 Destination country:
 <select bind-options="availableCountries"></select>
</p>

//.js片段
availableCountries=justep.Bind.observableArray(['France', 'Germany', 'Spain'])

多选列表

//.W片段
<p>
 Choose some countries you would like to visit:
 <select bind-options="availableCountries" size="5" multiple="true"></select>
</p>

//.js片段
availableCountries=justep.Bind.observableArray(['France', 'Germany', 'Spain']);

绑定任意对象

//.W片段
<p>
 Your country:
 <select bind-options="availableCountries"
 bind-optionsText= "'countryName'"
 bind-value= "selectedCountry"
 bind-optionsCaption= "'Choose...'"></select>
</p>

<div bind-visible="selectedCountry"> <!-- Appears when you select something -->
 You have chosen a country with population
 <span bind-text="selectedCountry.get() ? selectedCountry.get().countryPopulation : 'unknown'"></span>.
</div>

//.js片段
var Country = function (name, population) {
 this.countryName = name;
 this.countryPopulation = population;
 };

 var Model = function(){
 this.callParent();
 this.availableCountries=justep.Bind.observableArray([
 new Country("UK", 65000000),
 new Country("USA", 320000000),
 new Country("Sweden", 29000000)
 ]);
 this.selectedCountry=justep.Bind.observable('');
 };

optionsText绑定方法

//.W片段
<!-- Same as example 3, except the <select> box expressed as follows: -->
<select bind-options="availableCountries"
 bind-optionsText= "function (item) {
 return item.countryName + ' (pop: ' + item.countryPopulation + ')'
 }"
 bind-value= "selectedCountry"
 bind-optionsCaption= "'Choose...'"></select>

绑定规则：

options绑定将数组生成option节点，添加到select元素中。如果绑定值为字符串数组，option中显示的将是字符串本身；如果绑定值是object对象，在options绑定中，还需要设置optionsText，用来决定将如何显示绑定的对象，如果你需要，还可以使用optionsValue字段。

options绑定为双向绑定，如果绑定的是监视对象，则可以进行双向的更改。

其它参数

  • optionsCaption：在下拉别表中，默认会选中一个option，但是通常我们不希望进行选中，而是为select添加一个“–请选择–”这样的一个选项。KO为我们考虑到了这种需求，我们可以使用optionsCaption来实现。
  • optionsText：当我们将一个对象绑定到option上的时候，需要指定optionsText参数。optionsText参数是对象的一个属性，或者一个返回字符串的方法。
  • optionsValue：当option绑定的是任意对象的时候，如果我们希望选中的值是一个字符串，我们可以指定optionsValue参数，参数的形式为对象的一个属性，或者一个返回字符串的方法。
  • optionsIncludeDestroyed：在监视的数组对象中，如果有数组项被标记删除，默认情况下是不会显示出来的。如果想对已标记删除的数据进行显示，需要将optionsIncludeDestroyed设置为true。
  • optionsAfterRender：在options被绘制完成之后调用，用来执行一些自定义的逻辑代码。
  • selectedOptions：多选列表中的选中项。
  • valueAllowUnset：当选中值在绑定对象中不存在时，允许将值设置为null

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443