Knockout.js: различия между версиями
[отпатрулированная версия] | [непроверенная версия] |
KrBot (обсуждение | вклад) м подстановка даты в шаблон:Значимость |
отмена правки 99153731 участника 91.192.46.187 (обс.) дефиса и не должно быть Метка: отмена |
||
(не показано 29 промежуточных версий 16 участников) | |||
Строка 1: | Строка 1: | ||
{{Карточка программы |
{{Карточка программы |
||
| name = |
| name = <!-- Wikidata --> |
||
| logo = |
| logo = |
||
| screenshot = |
| screenshot = |
||
| author = [http://blog.stevensanderson.com Steve Sanderson] |
| author = [http://blog.stevensanderson.com Steve Sanderson] |
||
| developer = |
| developer = |
||
⚫ | |||
| programming_language = [[JavaScript]] |
|||
⚫ | |||
⚫ | |||
⚫ | |||
| latest_preview_version = |
| latest_preview_version = |
||
| latest_preview_date = |
| latest_preview_date = |
||
| genre = <!-- Wikidata --> |
|||
| operating_system = [[Кроссплатформенное ПО]] |
|||
⚫ | |||
| genre = [[JavaScript]]-[[Библиотека (программирование)|библиотека]] |
|||
| license = [[MIT License]] |
|||
| size = 46 KB minified / 206 KB (development mode) |
|||
⚫ | |||
}} |
}} |
||
'''Knockout.js''' ({{lang-en|}}[[нокаут]]) |
'''Knockout.js''' ({{lang-en|}}[[нокаут]]) — [[Свободное программное обеспечение|свободный]] [[JavaScript]] [[Content Management Framework|каркас веб-приложений]], реализующий [[Model-View-ViewModel]] шаблон c образцами. Основными принципами являются: |
||
* чёткое разделение доменных данных, компонентов отображения и отображаемых данных |
* чёткое разделение доменных данных, компонентов отображения и отображаемых данных |
||
* наличие чётко |
* наличие чётко определённого слоя специализированного кода, задающего отношение компонентов отображения. |
||
Автором библиотеки является сотрудник [[Microsoft]], однако, по его словам библиотека останется такой, какой она является, и будет развиваться в направлении, определяемом лишь им самим и сообществом пользователей. Также он подчёркивает, что библиотека не является продуктом Microsoft<ref name="Hello, Microsoft">{{cite web | url = http://blog.stevensanderson.com/2010/11/03/hello-microsoft/ | title = Steven Sanderson's blog post 'Hello, Microsoft' | date = |
Автором библиотеки является сотрудник [[Microsoft]], однако, по его словам библиотека останется такой, какой она является, и будет развиваться в направлении, определяемом лишь им самим и сообществом пользователей. Также он подчёркивает, что библиотека не является продуктом Microsoft<ref name="Hello, Microsoft">{{cite web | url = http://blog.stevensanderson.com/2010/11/03/hello-microsoft/ | title = Steven Sanderson's blog post 'Hello, Microsoft' | date = 2010-11-03 | publisher = blog.stevensanderson.com | accessdate = 2014-10-22 | archive-date = 2014-11-20 | archive-url = https://web.archive.org/web/20141120121426/http://blog.stevensanderson.com/2010/11/03/hello-microsoft/ | deadlink = no }}</ref>. |
||
На начало 2015 года библиотека была ранее использована на 17018 веб-сайтах, и продолжает использоваться на 29039 сайтах, в том числе на 55 из 10 тысяч наиболее популярных<ref name="usage">{{cite web |
|||
| url = http://trends.builtwith.com/javascript/KnockoutJS |
|||
| title = Статистика использования Knockout.js на веб-сайтах |
|||
| language = en |
|||
| access-date = 2015-01-17 |
|||
| archive-date = 2015-01-18 |
|||
| archive-url = https://web.archive.org/web/20150118095311/http://trends.builtwith.com/javascript/KnockoutJS |
|||
| deadlink = no |
|||
}}</ref>, например, на сайте компании [[Philips]]<ref name="usage-top">{{cite web |
|||
| url = http://trends.builtwith.com/websitelist/KnockoutJS |
|||
| title = Использование Knockout.js на веб-сайтах |
|||
| language = en |
|||
| access-date = 2015-01-17 |
|||
| archive-date = 2015-02-27 |
|||
| archive-url = https://web.archive.org/web/20150227133434/http://trends.builtwith.com/websitelist/KnockoutJS |
|||
| deadlink = no |
|||
}}</ref>. |
|||
== Особенности == |
== Особенности == |
||
Строка 26: | Строка 40: | ||
* Автоматическое обновление интерфейса при изменении состояния данных модели |
* Автоматическое обновление интерфейса при изменении состояния данных модели |
||
* Отслеживание зависимостей |
* Отслеживание зависимостей |
||
* Прототипирование с |
* Прототипирование с использованием как собственных так и сторонних механизмов (например, ''jquery.tmpl'') |
||
== Пример == |
== Пример == |
||
В данном примере, два текстовых поля привязаны к отслеживаемым переменным в модели данных. В случае изменения их значений будет вызвана функция, меняющая значение ''fullName'', что соответственно изменит значение в представлении (HTML). |
В данном примере, два текстовых поля привязаны к отслеживаемым переменным в модели данных. В случае изменения их значений будет вызвана функция, меняющая значение ''fullName'', что соответственно изменит значение в представлении (HTML). |
||
=== View (HTML) === |
=== View (HTML) === |
||
<source lang="xml"> |
<source lang="xml"> |
||
<p>First name: <input data-bind="value: firstName" /></p> |
<p>First name: <input data-bind="value: firstName" /></p> |
||
Строка 40: | Строка 53: | ||
=== View Model (JavaScript) === |
=== View Model (JavaScript) === |
||
<source lang="javascript"> |
<source lang="javascript"> |
||
function ViewModel() { |
function ViewModel() { |
||
Строка 53: | Строка 65: | ||
ko.applyBindings(new ViewModel()); |
ko.applyBindings(new ViewModel()); |
||
</source> |
</source> |
||
⚫ | |||
⚫ | |||
* [[jQuery]] |
|||
== Примечания == |
== Примечания == |
||
{{примечания |
{{примечания}} |
||
<ref name="latest stable">https://github.com/knockout/knockout/releases/tag/v3.2.0</ref> |
|||
== Литература == |
|||
* {{книга |
|||
| автор = Munro, J. |
|||
| заглавие = Knockout.js: Building Dynamic Client-Side Web Applications |
|||
| издательство = O'Reilly Media |
|||
| год = 2014 |
|||
| allpages = 102 |
|||
| isbn = 9781491914328 |
|||
| ref = Munro |
|||
}} |
|||
* {{книга |
|||
| автор = Munro, J. |
|||
| заглавие = ASP. NET MVC 5 with Bootstrap and Knockout. Js: Building Dynamic, Responsive Web Applications |
|||
| издательство = O'Reilly Media, Incorporated |
|||
| год = 2015 |
|||
| allpages = 200 |
|||
| isbn = 9781491914397 |
|||
| ref = Munro 2015 |
|||
}} |
|||
* {{книга |
|||
| автор = Messora, R. |
|||
| заглавие = Web App Testing Using Knockout.JS |
|||
| год = 2014 |
|||
| allpages = 154 |
|||
| издательство = Packt Publishing Ltd |
|||
| isbn = 9781783982851 |
|||
| ref = Messora |
|||
}} |
|||
* {{книга |
|||
| автор = Moran, T. |
|||
| заглавие = Mastering KnockoutJS |
|||
| год = 2014 |
|||
| allpages = 270 |
|||
| isbn = 9781783981014 |
|||
| ref = Moran |
|||
}} |
}} |
||
== Ссылки == |
== Ссылки == |
||
* {{official|knockoutjs.com}} |
* {{official|knockoutjs.com}} |
||
* [http://knockoutmvc.com/ Knockout MVC: A framework integrating KnockoutJS into ASP.NET]{{ref-en}} |
|||
* [http://channel9.msdn.com/Events/MIX/MIX11/FRM08 Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET]{{ref-en}} |
|||
* [https://web.archive.org/web/20121219181049/http://blog.davidpadbury.com/2011/03/20/using-isotope-with-knockout-js/ Using Isotope with Knockout.js]{{ref-en}} |
|||
* [http://www.knockmeout.net/ Примеры Knockout.js]{{ref-en}} |
|||
{{JavaScript}} |
|||
⚫ | |||
⚫ | |||
{{значимость|2015-01-17}} |
|||
{{Фреймворки для веб-приложений}} |
|||
[[Категория: |
[[Категория:Веб-фреймворки на JavaScript]] |
||
[[Категория:Библиотеки JavaScript]] |
[[Категория:Библиотеки JavaScript]] |
||
[[Категория:JavaScript]] |
[[Категория:JavaScript]] |
Текущая версия от 13:48, 21 мая 2024
Knockout.js | |
---|---|
Тип | библиотека JavaScript |
Автор | Steve Sanderson |
Написана на | JavaScript |
Операционная система | кроссплатформенность |
Аппаратная платформа | кроссплатформенность |
Последняя версия | |
Репозиторий | github.com/knockout/knoc… |
Лицензия | лицензия MIT |
Сайт | knockoutjs.com (англ.) |
Knockout.js (англ. нокаут) — свободный JavaScript каркас веб-приложений, реализующий Model-View-ViewModel шаблон c образцами. Основными принципами являются:
- чёткое разделение доменных данных, компонентов отображения и отображаемых данных
- наличие чётко определённого слоя специализированного кода, задающего отношение компонентов отображения.
Автором библиотеки является сотрудник Microsoft, однако, по его словам библиотека останется такой, какой она является, и будет развиваться в направлении, определяемом лишь им самим и сообществом пользователей. Также он подчёркивает, что библиотека не является продуктом Microsoft[3].
На начало 2015 года библиотека была ранее использована на 17018 веб-сайтах, и продолжает использоваться на 29039 сайтах, в том числе на 55 из 10 тысяч наиболее популярных[4], например, на сайте компании Philips[5].
Особенности
[править | править код]- Декларативное связывание
- Автоматическое обновление интерфейса при изменении состояния данных модели
- Отслеживание зависимостей
- Прототипирование с использованием как собственных так и сторонних механизмов (например, jquery.tmpl)
Пример
[править | править код]В данном примере, два текстовых поля привязаны к отслеживаемым переменным в модели данных. В случае изменения их значений будет вызвана функция, меняющая значение fullName, что соответственно изменит значение в представлении (HTML).
View (HTML)
[править | править код]<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
View Model (JavaScript)
[править | править код]function ViewModel() {
this.firstName = ko.observable("Joe");
this.lastName = ko.observable("Bloggs");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
ko.applyBindings(new ViewModel());
См. также
[править | править код]Примечания
[править | править код]- ↑ Release 3.5.1 — 2019.
- ↑ npmjs
- ↑ Steven Sanderson's blog post 'Hello, Microsoft' . blog.stevensanderson.com (3 ноября 2010). Дата обращения: 22 октября 2014. Архивировано 20 ноября 2014 года.
- ↑ Статистика использования Knockout.js на веб-сайтах (англ.). Дата обращения: 17 января 2015. Архивировано 18 января 2015 года.
- ↑ Использование Knockout.js на веб-сайтах (англ.). Дата обращения: 17 января 2015. Архивировано 27 февраля 2015 года.
Литература
[править | править код]- Munro, J. Knockout.js: Building Dynamic Client-Side Web Applications. — O'Reilly Media, 2014. — 102 p. — ISBN 9781491914328.
- Munro, J. ASP. NET MVC 5 with Bootstrap and Knockout. Js: Building Dynamic, Responsive Web Applications. — O'Reilly Media, Incorporated, 2015. — 200 p. — ISBN 9781491914397.
- Messora, R. Web App Testing Using Knockout.JS. — Packt Publishing Ltd, 2014. — 154 p. — ISBN 9781783982851.
- Moran, T. Mastering KnockoutJS. — 2014. — 270 p. — ISBN 9781783981014.
Ссылки
[править | править код]- knockoutjs.com — официальный сайт Knockout.js
- Knockout MVC: A framework integrating KnockoutJS into ASP.NET (англ.)
- Knockout JS: Helping you build dynamic JavaScript UIs with MVVM and ASP.NET (англ.)
- Using Isotope with Knockout.js (англ.)
- Примеры Knockout.js (англ.)