Knockout.js: различия между версиями

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
[отпатрулированная версия][непроверенная версия]
Содержимое удалено Содержимое добавлено
м подстановка даты в шаблон:Значимость
отмена правки 99153731 участника 91.192.46.187 (обс.) дефиса и не должно быть
Метка: отмена
 
(не показано 29 промежуточных версий 16 участников)
Строка 1: Строка 1:
{{Карточка программы
{{Карточка программы
| name = Knockout.js
| name = <!-- Wikidata -->
| logo =
| logo =
| screenshot =
| screenshot =
| author = [http://blog.stevensanderson.com Steve Sanderson]
| author = [http://blog.stevensanderson.com Steve Sanderson]
| developer =
| developer =
| latest_release_version = <!-- Wikidata -->
| programming_language = [[JavaScript]]
| latest_release_date = <!-- Wikidata -->
| latest_release_version = 3.2.0<ref name="latest stable"/>
| latest_release_date = 12 августа 2014
| latest_preview_version =
| latest_preview_version =
| latest_preview_date =
| latest_preview_date =
| genre = <!-- Wikidata -->
| operating_system = [[Кроссплатформенное ПО]]
| website = <!-- Wikidata -->
| genre = [[JavaScript]]-[[Библиотека (программирование)|библиотека]]
| license = [[MIT License]]
| size = 46&nbsp;KB minified / 206&nbsp;KB (development mode)
| website = {{url|http://knockoutjs.com/}}
}}
}}
'''Knockout.js''' ({{lang-en|}}[[нокаут]]) — [[Свободное программное обеспечение|свободный]] [[JavaScript]] [[Content Management Framework|каркас веб-приложений]], реализующий [[Model-View-ViewModel]] шаблон c образцами. Основными принципами являются:
'''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 = November 3, 2010 | publisher = blog.stevensanderson.com | accessdate = 2014-10-22 }}</ref>.
Автором библиотеки является сотрудник [[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'')
* Прототипирование с использованием как собственных так и сторонних механизмов (например, ''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>

== См. также ==
* [[AngularJS]]
* [[jQuery]]


== Примечания ==
== Примечания ==
{{примечания|refs=
{{примечания}}

<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}}
== См. также ==
* [[AngularJS]]

{{значимость|2015-01-17}}
{{Фреймворки для веб-приложений}}


[[Категория:Каркасы веб-приложений на JavaScript]]
[[Категория:Веб-фреймворки на 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).

<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());

Примечания

[править | править код]
  1. Release 3.5.1 — 2019.
  2. npmjs
  3. Steven Sanderson's blog post 'Hello, Microsoft'. blog.stevensanderson.com (3 ноября 2010). Дата обращения: 22 октября 2014. Архивировано 20 ноября 2014 года.
  4. Статистика использования Knockout.js на веб-сайтах (англ.). Дата обращения: 17 января 2015. Архивировано 18 января 2015 года.
  5. Использование 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.