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'" />

В приведенном выше примере будет изменено обновление значения для запуска ключа. Доступными параметрами являются ввод, ввод в память, нажатие клавиши и последующее нажатие.