options: <binding-array>
此绑定用于定义select元素的选项。 这可以用于下拉列表或多选列表。 此绑定不能与元素以外的任何内容一起使用。
Syntax
options: <binding-array>
Parameters
这里要传递的参数是一个数组。 对于阵列中的每个条目，将为相应的选择节点添加该选项。 早期选项将被删除。
如果参数是可观察值，则元素的可用选项将在基础observable更改时更新。 如果没有使用可观察的元素，则只处理一次元素。
附加参数
optionsCaption - 这只是一个默认的虚拟值，显示为“从下方选择项目”或“从下方选择”。
optionsText - 此参数允许您在下拉列表中指定要设置为文本的对象属性。 此参数还可以包含一个函数，该函数返回要使用的属性。
optionsValue - 与optionsText类似。 此参数允许指定可以使用哪个对象属性来设置选项元素的value属性。
optionsIncludeDestroyed - 如果要查看标记为已销毁但实际上未从可观察数组中删除的数组项，请指定此参数。
optionsAfterRender - 用于在现有选项元素上运行某些自定义逻辑。
selectedOptions - 用于从多选列表中读取和写入所选选项。
valueAllowUnset - 使用此参数，可以使用select元素中实际不存在的值设置model属性。 这样，当用户第一次查看下拉列表时，可以将默认选项保持为空白。
Example
让我们看一下下面的例子，它演示了如何使用选项绑定。
<!DOCTYPE html>
<head>
<title>KnockoutJS Options Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>Tutorials Library:
<select data-bind = "
options: availableTutorials,
value: selectedTutorial,
optionsCaption: 'Choose tutuorial...',
"></select></p>
<p>You have selected <b><span
data-bind = "text:selectedTutorial"></span></b></p>
<script type = "text/javascript">
function ViewModel() {
this.selectedTutorial = ko.observable();
this.availableTutorials = ko.observableArray ([
'Academic','Big Data',
'Databases','Java Technologies',
'Mainframe','Management',
'Microsoft Technologies','Mobile Development',
'Programming','Software Quality'
]);
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在options-bind.htm文件中。
在浏览器中打开此HTML文件。
请注意，值绑定用于从下拉列表中读取当前选定的项目。
观察 (Observations)
设置/更改选项时保留选择
KO将尽可能保持用户的选择不变，而选项绑定更新《select》元素中的选项集。 对于下拉列表中的单个选择，仍将保留先前选择的值。 对于多选列表，将保留所有先前选择的选项。
对生成的选项进行后处理
在optionsAfterRender回调的帮助下，可以为一些其他自定义逻辑对生成的选项进行后处理。 在将每个元素插入列表后执行此函数，具有以下参数 -
插入的选项元素。
与之绑定的数据项; 对于标题元素，这将是未定义的。
Example
让我们看看下面的示例，该示例使用optionsAfterRender为每个选项添加禁用绑定。
<!DOCTYPE html>
<head>
<title>KnockoutJS Options Binding - using optionsAfterRender </title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<select size = 3 data-bind = "
options: myItems,
optionsText: 'name',
optionsValue: 'id',
optionsAfterRender: setOptionDisable">
</select>
<script type = "text/javascript">
function ViewModel() {
myItems = [
{ name: 'First Class', id: 1, disable: ko.observable(false)},
{ name: 'Executive Class', id: 2, disable: ko.observable(true)},
{ name: 'Second Class', id: 3, disable: ko.observable(false)}
];
setOptionDisable = function(option, item) {
ko.applyBindingsToNode(option, {disable: item.disable}, item);
}
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Output
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在options-bind-optionsafterrender.htm文件中。
在浏览器中打开此HTML文件。
使用optionsAfterRender回调禁用ID为2的选项。