Руководство для начинающих по KnockoutJS: часть 2

  <input data-bind = "value: name, valueUpdate: 'afterkeydown'"> </ input>
 <p data-bind = "text: name"> </ p>

 function viewModel () {
  var self = this;
  self.name = ko.observable ()
 };
 ko.applyBindings (new viewModel ()); 

Control Mark Up

Привязка html используется не так часто, но она очень удобна для рендеринга содержимого HTML в вашей модели представления. Эта привязка устанавливает HTML-код связанного элемента со значением вашего параметра и является эквивалентом установки свойства innerHTML для элемента DOM. Если ваш параметр отличается от числа или строки, то привязка присваивает элементу результаты toString() .

Так как эта привязка устанавливает содержимое вашего элемента с помощью innerHTML , вы должны быть осторожны, чтобы не использовать его со значениями ненадежной модели, поскольку это может открыть возможность атаки с помощью внедрения сценария. Если вы не можете гарантировать, что содержимое безопасно для отображения, вы можете использовать вместо этого text привязку.

  <div data-bind = "html: markup"> </ div>

 function viewModel () {
  var self = this;
  self.markup = ko.observable ('<p> <strong> Knockout </ strong> такой <em> классный </ em>! </ p>')
 };
 ko.applyBindings (new viewModel ());

Хотя Knockout имеет много встроенных привязок, вы наверняка столкнетесь с некоторыми ситуациями, для которых не существует ни одной. Для них Knockout предлагает привязку attr , которая позволяет привязывать данные к любому атрибуту со свойством модели представления. Параметр должен быть объектом JavaScript, где имена свойств — это атрибуты, а значения свойств — это значение, которое будет связано с атрибутом. Это очень полезно во многих распространенных сценариях, таких как привязка href и title элемента a или src и alt элемента img .

  <img data-bind = "attr: {src: url, alt: details}" />

 function viewModel () {
  var self = this;
  self.url = ko.observable (images / logo.png)
  self.details = ko.observable ('Это логотип')
 };
 ko.applyBindings (new viewModel ()); 

Добавить стиль

Вы можете связывать стили с помощью Knockout, используя css и встроенные привязки стилей.

Привязка css устанавливает один или несколько классов CSS для связанного элемента. Параметр должен быть объектом JavaScript, где имена свойств соответствуют желаемым классам CSS, а значения свойств оцениваются как true или false, указывая, следует ли применять класс. Вы можете установить несколько классов CSS одновременно.

 <Стиль>
 .colorize {color: red}
 </ Стиль>

 <p data-bind = "css: {colorize: on}"> Текст </ p>

 function viewModel () {
  var self = this;
  self.on = ko.observable (правда)
 };
 ko.applyBindings (new viewModel ()); 

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

  <p data-bind = "css: {colorize: on ()> 3}"> Текст </ p> 

Хотя по возможности лучше использовать классы CSS, иногда вам может понадобиться установить и определенный стиль. Knockout поддерживает это с помощью встроенной привязки style которая устанавливает одно или несколько значений стиля для связанного элемента. Параметр должен быть объектом, свойства которого соответствуют именам стилей CSS, а значения соответствуют значениям стилей, которые вы хотите применить. Обычно значение этого параметра объявляется с использованием JSON.

  <p data-bind = "style: {color: on ()> 3? 'red': 'black'}"> Text </ p>
 function viewModel () {
  var self = this;
  self.on = ko.observable (5)
 };
 ko.applyBindings (new viewModel ()); 

Примечание. Если у вас есть атрибут или класс CSS, имя которого не является допустимым именем переменной JavaScript, вы должны заключить имя идентификатора в кавычки, чтобы оно стало строковым литералом. И если вы хотите применить стиль, имя которого не является допустимым идентификатором JavaScript, вы должны использовать имя JavaScript для этого стиля.

 // неправильно:
 <div data-bind = "attr: {data -thing: someValue}"> ... </ div>
 <div data-bind = "css: {my-class: someValue}"> ... </ div>
 <div data-bind = "style: {font-weight: someValue}"> ... </ div>

 //верный:
 <div data-bind = "attr: {'data -thing': someValue}"> ... </ div>
 <div data-bind = "css: {'my-class': someValue}"> ... </ div>
 <div data-bind = "style: {fontWeight: someValue}"> ... </ div> 

Обработка событий

Knockout поддерживает привязку к любому событию через встроенную привязку event . Он добавляет обработчики событий для указанных событий в связанный элемент DOM. Вы можете использовать это для привязки к любым определенным событиям HTML. В вашем обработчике событий вы можете получить доступ к текущему элементу данных модели представления, объекту события или даже к пользовательским параметрам, переданным как часть привязки события. Чтобы использовать привязку event , вы передаете литерал объекта, содержащий пары «имя-значение» для имени события и метода модели представления, разделенные запятыми.

  <p data-bind = "event: {mouseover: hello, mouseout: goodbye}"> Наведите курсор мыши на меня!  </ Р>
 <p data-bind = "text: helloEnabled"> </ p>
 <p data-bind = "text: goodbyeEnabled"> </ p>

 function viewModel () {
 var self = this;
 self.helloEnabled = ko.observable ()
 self.goodbyeEnabled = ko.observable ()
  self.hello = function () {
  self.helloEnabled ( 'Hello!');
  self.goodbyeEnabled ( '');
  }
  self.goodbye = function () {
  self.goodbyeEnabled ( 'До свидания!');
  self.helloEnabled ( '');
  }
 };
 ko.applyBindings (new viewModel ());

Привязка click , как вы можете догадаться, обрабатывает событие клика. Поскольку это наиболее часто используемая привязка для событий, это просто ярлык для привязки event .

  <button data-bind = "click: writeMSG"> Показать </ button>
 <p data-bind = "text: msg"> </ p>

 function viewModel () {
  var self = this;
  self.msg = ko.observable ()
  self.writeMSG = function () {
  self.msg ( 'Hello!')
  }
 };
 ko.applyBindings (new viewModel ()); 

submit привязку является ярлыком для обработки события отправки для элемента формы. Когда вы используете привязку к submit в форме, Knockout запрещает браузеру выполнить действие отправки по умолчанию для этой формы. Другими словами, браузер вызовет вашу функцию-обработчик, но не отправит форму на сервер. Это полезное значение по умолчанию, потому что когда вы используете привязку submit , обычно это происходит потому, что вы используете форму как интерфейс к вашей модели представления, а не как обычную форму HTML. Если вы хотите, чтобы форма отправлялась как обычная HTML-форма, просто верните true из вашего обработчика отправки.

Вместо того, чтобы использовать отправить в форме, вы можете использовать кнопку «Отправить». Но использование привязки отправки дает вам преимущества использования альтернативных способов отправки формы, таких как нажатие клавиши ввода при вводе в текстовое поле.

Управляющий интерфейс

visible привязка устанавливает видимость связанного элемента на основе значения параметра привязки. Привязка пытается преобразовать любой параметр в логическое значение. visible привязка Knockout должна быть привязана к свойству, которое оценивается как true или false. Это имеет приоритет над любым стилем отображения, который вы определили с помощью CSS.

  <button data-bind = "click: show"> Показать сообщение </ button>
 <button data-bind = "click: hide"> Скрыть сообщение </ button>
 <p data-bind = "visible: msg"> Привет, нокаут! </ p>

 function viewModel () {
  var self = this;
  self.msg = ko.observable ()
  self.show = function () {
  self.msg (правда)
  }
  self.hide = function () {
  self.msg (ложь)
  }
 };
 ko.applyBindings (new viewModel ());

enable/disable привязки устанавливает атрибут disabled для связанного элемента на основе предоставленного значения. Это обычно используется для элементов формы, таких как input , select и textarea . Knockout предоставляет встроенные привязки для включения и отключения элементов ввода. Привязка enable активирует входной элемент, если свойство, с которым он связан, оценивается как true, и отключает элемент, если он оценивается как false. disable привязки делает прямо противоположное

  <input data-bind = "value: val, valueUpdate: 'afterkeydown'">
 <button data-bind = "enable: val"> Send </ button>

 function viewModel () {
  var self = this;
  self.val = ko.observable ()
 };
 ko.applyBindings (new viewModel ()); 

Knockout имеет встроенную привязку с именем hasfocus которая определяет и устанавливает, какой элемент имеет фокус. hasfocus удобна, когда вы хотите, чтобы фокус был установлен на конкретный элемент формы, например, форму поиска, когда посетитель открывает страницу.

  <input data-bind = "value: val, hasfocus: on"> 
 <button data-bind = "enable: on"> Отправить </ button>
 function viewModel () {
  var self = this;
  self.val = ko.observable ()
  self.on = ko.observable (false)
 };
 ko.applyBindings (new viewModel ()); 

Работа с флажками и радио-кнопками

Флажки могут быть данными, привязанными к checked привязке Knockout. checked привязка должна быть привязана к свойству или выражению, которое оценивается как true или false. Поскольку свойства модели представления определены как наблюдаемые, флажок обновляется при изменении свойства источника. Аналогично, когда пользователь устанавливает или снимает флажок, значение обновляется в свойстве модели представления. Эта привязка устанавливает проверенное состояние переключателей и флажков. Для флажков привязка пытается преобразовать любой параметр в логическое значение. Для переключателей привязка сравнивает атрибут значения кнопок с параметром привязки.

  <p> Позвольте мне выбрать мой любимый автомобиль: <input type = "checkbox" data-bind = "checked: car" /> </ p>
 <div data-bind = "visible: car">
  Предпочитаемая модель:
  <div> <input type = "radio" name = "modelsGroup" value = "ferrari" data-bind = "checked: model" /> Ferrari </ div>
  <div> <input type = "radio" name = "modelsGroup" value = "lamborghini" data-bind = "флажок: модель" /> Lamborghini </ div>
  <div> <input type = "radio" name = "modelsGroup" value = "bugatti" data-bind = "флажок: модель" /> Bugatti </ div>
 </ DIV>

 function viewModel () {
  var self = this;
  self.car = ko.observable (),
  self.model = ko.observable ("lamborghini") // Первоначально выбирает Lamborghini
 };
 ko.applyBindings (new viewModel ());

Создание выпадающих списков

Раскрывающиеся списки имеют несколько важных свойств для загрузки списка элементов, отображения значения, использования другого значения ключа и сохранения выбора пользователя. Knockout предоставляет встроенную привязку для каждого из них. Привязка options устанавливает параметры, которые будут отображаться в элементе раскрывающегося списка. Значение должно быть массивом. Эта привязка не может использоваться ни с чем, кроме элементов <select> . Для списка с множественным выбором, чтобы установить, какой из параметров выбран, или чтобы прочитать, какой из параметров выбран, используйте привязку selectedOptions . Для списка с одним выбором можно также прочитать и записать выбранную опцию, используя привязку value .

Привязка options определяет список значений для отображения, обычно из свойства массива в модели представления.

  <p> Выберите свою судьбу: <select data-bind = "options: availableRoles"> </ select> </ p>

 function viewModel () {
  var self = this;
  self.availableRoles = ko.observableArray (['художник', 'актер', 'автор'])
 };
 ko.applyBindings (new viewModel ()); 

Привязка selectedOptions контролирует, какие элементы в списке с множественным выбором в настоящее время выбираются. Когда пользователь выбирает или отменяет выбор элемента в списке множественного выбора, это добавляет или удаляет соответствующее значение в массив в вашей модели представления.

  <p> Выберите свою судьбу: <select data-bind = "options: availableRoles, selectedOptions: selected" множественный = "true"> </ select> </ p>

 function viewModel () {
  var self = this;
  self.availableRoles = ko.observableArray (['художник', 'актер', 'автор'])
  self.selected = ko.observableArray (['автор'])
 };
 ko.applyBindings (new viewModel ()); 

Иногда вы хотите отобразить одно значение в раскрывающемся списке, но использовать другое значение, когда пользователь выбирает элемент из списка. optionsText встроенные в optionsValue привязки optionsText и optionsValue . Для привязки optionsText имя строки свойства, отображаемого в раскрывающемся списке, из привязки параметров. Для привязки optionsValue строковое имя свойства, к optionsValue привязывается выбранное значение элемента в раскрывающемся списке. optionsCaption полезен, когда вы не хотите, чтобы по умолчанию был выбран какой-либо из параметров. Этот параметр устанавливает текст, например «Выбрать элемент…», в ​​верхней части списка параметров и показывает его, когда не выбран какой-либо конкретный элемент.

 <p> Локали: <select data-bind = "options: locales, selectedOptions: selected, optionsCaption: 'Select your locale ...', optionsText: 'country', optionsValue: 'code'"> </ select> </ р>
 <p data-bind = "text: selected"> </ p>

 function viewModel () {
   var self = this;
   self.locales = [
    {страна: 'США', код: 'en_US'},
    {страна: 'Испания', код: 'es_ES'},
    {страна: 'французский', код: 'fr_FR'}
   ]
   self.selected = ko.observableArray ();
  }
 ko.applyBindings (new viewModel ()); 

И это все для этой части, следите за обновлениями в финал, то же самое время на следующей неделе!