Знайомство з (частина 1

Knockout - це не заміна jQuery; я сам є затятим шанувальником даної бібліотеки. Однак складно створювати комплексні призначені для користувача інтерфейси за допомогою однієї jQuery. Одна справа просто створити хороший інтерфейс, інша справа - оживити його, зробити динамічним, включити можливість сортування даних і багато іншого.

У цьому уроці ми створимо призначений для користувача інтерфейс, який містить список контактів, який ми надалі зможемо фільтрувати і сортувати. Knockout.js буде грати роль посередника між даними і сторінкою, таким чином, полегшивши нам роботу над UI.

Раунд 1. Початок

Knockout використовує архітектуру (MVVM) Модель - Подання - Модель уявлення. Список контактів та інші елементи сторінки, з яких вона складатиметься, можуть бути поміщені в уявлення. Самі дані, які будуть відображатися, можуть бути представлені в моделі. Третій компонент, модель уявлення, - це по суті стан інтерфейсу в даний момент часу (комбінація даних та подання з уже застосованими інтерактивними елементами).

Давайте ж почнемо роботу з створення каталогів. В першу чергу, створіть папку knockout, а в ній - три каталогу: css, img, js. В папці css будуть зберігатися стилі, які ми будемо використовувати в нашому інтерфейсі, в img зображення, в js скрипти. Для початку, в папку js потрібно закинути три наступних файлу:

Тепер створюємо сторінку і підключаємо файли:

Зберігаємо даний файл як index.html в кореневій папці knockout. Цей код представляє з себе документ HTML5. Knockout, звичайно ж, працює і з іншими версіями, але в даній серії уроків ми будемо використовувати спеціальні атрибути, яких немає в HTML4.01. Я маю на увазі атрибути з префіксом data- *.

Також в нашому прикладі ми будемо використовувати таблицю стилів. Оскільки це не урок по CSS, то я не буду представляти цей код. Ви все зможете знайти в исходниках.

основний скрипт

Далі нам необхідно створити js файл, де буде розташовуватися основний функціонал. Давайте створимо файл behavior.js і помістимо в нього наступний код:

Зберігаємо файл. У цьому коді ми визначаємо функцію, куди в першу чергу, передаємо об'єкт jQuery, для того щоб зробити алиас знака $.

Потім визначаємо об'єкт моделі. У цьому прикладі дані моделі будуть представлені у вигляді звичайного масиву, проте ніхто не заважає вам надалі отримати їх в такому ж вигляді з якогось веб сервісу. Наш масив містить набір об'єктів, структура яких схожа з таблицею contacts в нашій передбачуваної БД. Крім текстових полів, кожен з об'єктів зберігає метод deleteMe, який призначений для видалення об'єкта з моделі.

Модель уявлення, як уже згадувалося раніше, містить дані, які відображаються в поточний момент часу. Тому після створення моделі ми, за допомогою методу ko.observableArray (), поміщаємо дані масиву в модель уявлення. Методи спостерігачі (observable *) - це фундаментальне поняття в knockout.js;

Після створення об'єкта моделі представлення ми поставили кому, після якої, в подальшому, запишемо інші настройки.

Після всього цього ми використовуємо метод ko.applyBindings (), для того щоб мати можливість працювати з моделлю уявлення. Також дані метод застосовує спеціальні прив'язки даних, які у нас ще не визначені. Зробимо це в подальшому.

Раунд 2. Створення уявлення

Тепер, коли у нас є модель і модель уявлення, можемо зайнятися створенням файлу, де буде здійснюватися введення, підстановка і виведення даних. Knockout дуже просто інтегрується з jQuery плагіном tmpl. Додайте наступний код в блок div перед підключенням js файлів:

В першу чергу, ми додаємо порожній div з id = "people". Зверніть увагу, що до даного елементу ми приєднали атрибут -data-bind. Даний атрибут повідомить knockout.js, які дані повинні бути прив'язані до цього елементу. При виклику методу ko.applyBindings () як раз-таки і відбувається ця прив'язка, про яку я говорив вам раніше. Також в цьому атрибуті ми вказуємо назву шаблону, в якому будуть виводитися дані.

Також ми пишемо настройку foreach, вказуючи назву об'єкта, де зберігаються наші дані. Звичайно ж ми можемо скористатися спеціальним блоком> для проходження по масиву, проте краще звикати до knockout-записів. Оскільки при конфігурації моделі ми скористалися методом-спостерігачем observableArray, knockout.js зможе відстежити зміну масиву об'єктів і відразу ж оновити їх відображення на сторінці. Ще одна перевага використання настройки foreach: при зміні моделі тільки нова або змінена запис буде пропущена через шаблон і виведена на екран. При використанні стандартної шаблонної записи> дана процедура торкнеться всі записи в моделі.

Відразу після визначення div слід створення шаблону. Тут ми вказуємо, які дані необхідно буде виводити при кожній ітерації циклу. В якості контейнера вибираємо елемент