Привязка options
Привязка options применяется к выпадающему списку или к спискам
с множественным выбором, то есть к элементу <select>. Эта форма привязки служит для наполнения списка элементами.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Привязка в KnockoutJS</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"></script>
</head>
<body>
<p>
Выбрать модель:
<select data-bind="options: phones"></select>
</p>
<script type="text/javascript">
var viewModel = {
phones: ko.observableArray(["iPhone SE", "Lumia 950", "Zenfone 3", "Xiaomi Mi5"])
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
В качестве значения параметру options передается объект, представляющий массив.
Также вместе с параметром options можно еще ряд параметров:
optionsCaption: устанавливает заголовок в спискеoptionsText: устанавливает отображаемую элементом списка текстовую меткуoptionsValue: устанавливает значение элемента спискаoptionsAfterRender: назначает функцию обратного вызова, которая срабатывает при завершении рендеринга элементов списка
Используем некоторые из этих параметров:
<p>
Выбрать модель:
<select data-bind="options: phones,
optionsText: 'model',
optionsValue: 'id',
value: selectedPhone,
optionsCaption: 'Выберите модель...'"></select>
</p>
<script type="text/javascript">
function Phone(id, model, price){
this.id = id;
this.model = model;
this.price = price;
}
var viewModel = {
phones: ko.observableArray([
new Phone(1, "iPhone SE", 39000),
new Phone(2, "Lumia 950", 35000),
new Phone(3, "Zenfone 3", 20000),
new Phone(4, "Xiaomi Mi5", 25000)
]),
selectedPhone : ko.observable() // ничего не выбираем по умолчанию
};
ko.applyBindings(viewModel);
</script>
В данном случае каждый элемент списка будет отображать значения свойства "model", а самим значением будет служить свойство "id".
selectedOptions
Параметр selectedOptions также используется в паре с параметром options
и позволяет определить, какие элементы в списках с множественным выбором будут выбраны по умолчанию:
<p> Выбрать модель:</p>
<select data-bind="options: phones,
selectedOptions: selectedPhones"
size="5" multiple="true"></select>
<script type="text/javascript">
var viewModel = {
phones: ko.observableArray(["iPhone SE", "Lumia 950", "Zenfone 3", "Xiaomi Mi5"]),
selectedPhones: ko.observableArray(["Lumia 950", "Zenfone 3"])
};
ko.applyBindings(viewModel);
</script>
- Глава 1. Введение в KnockoutJS
- Глава 2. Основы привязки
- Глава 3. Работа с формами
- Глава 4. Взаимодействие с сервером