Knockout — краткая шпаргалка

Я решил составить краткую шпаргалку по самым необходимым методом фреймворка 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,olth,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'
 
 	

Комментарии (3) -

Дмитрий 11.09.2015 18:56:42

Спасибо. доходчиво и хорошие примерчики. интересная штука, этот нокаут.

В разделе "computed и pureComputed" не описана основная мысль!
Отличие их не в быстродействии а в принципе работы:

* computed - при чтении всегда вычисляет результат на основе существующих в ViewModel свойств "observable";

* pureComputed - при чтении вычисляет результат только тогда, когда к "observable" свойству ViewModel есть привязка (существует зависимость) с элементом представления.
Если эта зависимость теряется в один момент (связанный DOM-элемент удаляется), то pureComputed() будет возвращать старый результат.

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

Андрей 22.12.2015 23:09:07

Большое спасибо за дополнение.

Добавить комментарий