Я решил составить краткую шпаргалку по самым необходимым методом фреймворка Knockout, она представляет из себя краткое описание метода с примером. Надеюсь, она будет полезна не только мне…
text,
value,
option,
attr,
checked,
visible,
enable,
disable,
html,
css,
style,
event,
click,
submit,
hasFocus,
foreach,
if,
ifnot,
with,
observable,
observableArray,
computed,
pureComputed,
template,
usefulПолучение значения
“text”
“text”— применяется для привязки элементов, значение которых не передаются каким-либо атрибутом, а записывается между открывающимся и закрывающимися тегами.
Подходит для:
p,
span,
h[1-6],
div,
li,
ol,
th,
tr,
td,
center,
blockquote,
address и подобных...
“value”
“value”— применяется для привязки элементов, значения которых передаются через атрибут value.
Подходит для: как правило это элементы
input, предназначенные для ввода информации (
text,
tel,
password,
email и подобные)
“option”
“option”— применяется для задания значений тегов option, созданных с помощью контейнера <select>
Может иметь дополнительные параметры:
- «optionsCaption» — текст значения по умолчанию, как правило это «Выберите…».
- «optionsText» — название элемента в объекте, из которого будет получен текст.
- «optionsValue» — название элемента в объекта, из которого будет получено значение для тега value.
- «optionsAfterRender» — позволяет выполнять действия после генерации элементов option.
- «selectedOptions» — позволяет хранить в себе список всех выбранных значений.
“attr”
“attr”— позволяет установить значение любого атрибута ассоциированного в DOM элемента.
Если название атрибута не является валидным названием переменной в JavaScript, то название атрибута необходимо взять в кавычки!
Ссылка
“checked”
"checked" — позволяет связывать значение состояния для элементов
<input type='checkbox'> или
<input type='radio'>
Текст
Отображение/Скрытие, Включение/Отключение
“visible”
“visible” — отображает/скрывает элемент в зависимости от возвращаемого значения переданной функции.
Этот текст отображается тогда, когда установлена галка на элементе checkbox
“enable”
“enable”— позволяет разблокоровать/заблокировать элемент, в зависимости от переданного значения.
“disable”
“disable” — аналогично
enable, но выполняет действие строго наоборот.
HTML и стили
“html”
“html” — позволяет отображать в DOM элементе HTML, переданный в параметре.
“css”
“css”— позволяет добавлять или удалять один или несколько название CSS классов в DOM элементе.
Текст…
“style”
“style”— добавляет или удаляет один или несколько стилей в DOM элементе.
Текст
События
“event”
“event” — позволяет добавлять обработчики событий для определённого события.
События мыши: 'click', 'dblclick', 'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave'
События клавиатуры: 'keyup', 'keydown', 'keypress'
Наведи мышь
Мышь наведена
“click”
“click” — позволяет определить функцию, вызываемую при щелчке на элементе.
Подходит для: button, input, a и подобных
Количество щелчков ()
“submit”
"submit" — определяет функцию, вызываемую при отправки значений формы(submit form): <form data-bind="submit: formSubmit">
<form data-bind="submit: formSubmit">
</form>
“hasFocus”
“hasFocus” — позволяет связывать событие получения элементов фокуса ввода.
Фокус установлен
Контроль потока
“foreach”
“foreach” — для каждого элемента переданного элемента массива дублирует копию разметки элемента и связывает её с элементом массива.
Если массив содержит только одно свойство, то можно воспользоваться параметром
$data, если необходимо получить индекс элемента в массиве
$index, получить родительский элемент позволяет параметр
$parent
Если нужно переопределить название части массива, то можно использовать “
as”. Например вместо $data можно писать content если воспользоваться следующим синтаксисом:
data-bind="foreach: {data: months, as: 'content'}"Использую один из параметров:
afterRender/afterAdd/beforeRemove/beforeMove/afterMove можно определить функцию, вызываемую в зависимости от того, когда был добавлен элемент в массив или действие связанное с его изменением.
В примере используется функция css из jQuery.
“if”
“if” — если переданный аргумент возвращает true, то элемент отображается, иначе он будет скрыт.
Скрытое сообщение.
Если передать объект, то if будет выполнен, если объект не равен null.
“ifnot”
“ifnot” — аналогично
if, то с противоположным значением.
“with”
“with” — создаёт объект привязки к необходимому объекту.
Latitude: ,
Longitude:
Наблюдение
observable
observableArray
Для того, чтобы добавить наблюдение за изменением объекта существует несколько способов:
ko.observable() — добавляет наблюдение за отдельным объектом
ko.observableArray() — добавляем наблюдение за массивом объектов
computed
pureComputed
Если нужно получить значения из других наблюдаемых объектов не только для чтения, но и для записи, то можно воспользоваться методом
ko.computed или
ko.pureComputed(введено в версии 3.2, отличается повышенной происводительностью)
First name:
Last name:
Hello,
Produce
Использование шаблонов
Шаблон (template)
Шаблон (template) позволяет в DOM элемент вывести значения по заданному шаблону.
Шаблон задаётся в блоке javaScript кода с указанием идентификатора данного шаблона.
В шаблоне можно использовать метод
foreach:
Можно использовать метод
as:
Методы “
afterRender”, “
afterAdd”, and “
beforeRemove” используются аналогично другим методам.
Полезное
Для того, чтобы обновление значения привязанного элемента происходило не после потери фокуса, а сразу после ввода, можно добавить код:
valueUpdate: 'afterkeydown'