knockout.js
Привязки - поля формы
Поиск…
Нажмите
Связывание с click
может использоваться с любым видимым элементом DOM для добавления обработчика событий, который будет вызывать функцию JavaScript, когда элемент будет нажат.
<button data-bind="click: onClick">Click me</button>
ko.applyBindings({
onClick: function(data, event) {
// data: the context of the element that triggered the event
console.log(data);
// event: the click event
console.log(event);
}
});
Опции
Используйте эту привязку для создания опций для элемента select
<select data-bind="options: gasGiants"></select>
<script type="text/javascript">
var viewModel = {
gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
};
</script>
Вы также можете использовать свойства внутри массива для отображения в списке и для сохранения в viewModel: optionsText
позволяет настраивать отображаемый текст
optionsValue
устанавливает свойство value соответствующего <option>
value
сохраняет значение выбранного параметра в наблюдаемом режиме viewModel
<select data-bind="options: gasGiants, optionsText:'name', optionsValue:'id', value:selectedPlanetId"></select>
<script type="text/javascript">
var viewModel = {
selectedPlanetId: ko.observable(),
gasGiants: ko.observableArray([{name:'Jupiter', id:'0'},
{name:'Saturn', id:'1'},
{name:'Neptune', id:'2'},
{name:'Uranus', id:'3'}])
};
</script>
Чтобы сохранить результаты списка с несколькими выборами, привязка параметров может быть объединена с привязкой selectedOptions
.
<select data-bind="options: gasGiants, selectedOptions: chosenGasGiants" multiple="true"></select>
<script type="text/javascript">
var viewModel = {
gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
chosenGasGiants: ko.observableArray(['Jupiter','Saturn']) // Initial selection
}; </script>
деактивирован активирован
Отключенное связывание добавляет disabled
атрибут к элементу html, что делает его более disabled
для редактирования или кликабельным. Это полезно в основном для элементов <input>
, <select>
, <textarea>
, <a>
и <button>
<input data-bind="disabled: disableInput"/>
<script type="text/javascript">
var viewModel = {
disableInput: ko.observable(true);
};
</script>
Обратное к disabled
привязке enabled
Видимость также может быть рассчитана с использованием функций JavaScript. Любые наблюдаемые, используемые в этих функциях, должны вызывать круглые скобки
<script type="text/javascript">
var viewModel = {
disableInput: ko.observable(true);
};
</script>
или же
<input data-bind="disabled: allValues().length>4"/>
<script type="text/javascript">
var viewModel = {
allValues: ko.observableArray([1,2,3,4,5]);
};
</script>
Отправить
Обработчик событий, вызываемый при отправке элемента DOM.
<form data-bind="submit: doSomething">
<!-- form content here -->
<button type="submit"></button>
</form>
<script type="text/javascript">
var vm = {
doSomething: function(data){
//do something here
};
}
</script>
Нокаут предотвратит отправку действий браузера по умолчанию для этой формы. Если вы хотите, чтобы ваша форма была представлена как обычная форма HTML, вы просто возвращаете true
в обработчике отправки.
Значение
Используйте привязку значения для получения значения элемента. Связывание значений может применяться к любому элементу управления формой, однако есть другие привязки, которые могут быть лучше подходят для флажков, переключателей и текстовых входов.
В следующем примере показано, как применить элемент привязки к нескольким полям ввода формы и как заполнять значения по умолчанию:
Определение ViewModel:
var MyViewModel = function(){
var self = this;
//Initialize valueOne
self.valueOne = ko.observable();
//Initialize valueTwo with a default value of "Value two"
self.valueTwo = ko.observable("Value two");
//Initialize the color dropdown, and by default, select the "blue" option
self.color = ko.observable("blue");
self.valueOne.subscribe(function(newValue){
console.log("valueOne: " + newValue);
});
self.valueTwo.subscribe(function(newValue){
console.log("valueTwo: " + newValue);
});
self.color.subscribe(function(newValue){
console.log("color: " + newValue);
});
}
Связанная разметка:
<input type="text" data-bind="value: valueOne" />
<input type="text" data-bind="value: valueTwo" />
<select data-bind="value: color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
В приведенном выше примере, когда значение изменяется, новое значение будет регистрироваться на консоли. Начальные значения не будут вызывать событие изменения.
По умолчанию привязка значения определяет изменение как изменение значения элемента, а фокус передается другому элементу. Это можно изменить с помощью параметра valueUpdate:
<input type="text" data-bind="value: valueOne, valueUpdate: 'keyup'" />
В приведенном выше примере будет изменено обновление значения для запуска ключа. Доступными параметрами являются ввод, ввод в память, нажатие клавиши и последующее нажатие.