KnockoutJs. Разбор кода todomvc

Автор:Игорь Тельменко

KnockoutJs. Разбор кода todomvc

И вот мы подобрались к следующему фреймворку, который пройдет через разбор кода приложения todomvc. Используемая версия KnockoutJs - 3.2.0.

Как обычно, код примера в github-репозитори. Рассматривается самая свежая версия примера на момент создания статьи. И всегда можно код todomvc на KnockoutJs скачать отсюда.

Здесь все просто. Есть лишь 2 основных файла

  • index.html
  • js/app.js

Как мы знаем из прошлого обзора, в Knockout реализован паттерн MVVM. И вот в первом файле содержится вид, а во втором модель и модель вида.

Модель у нас имеет такой вид:

А модель вида - это все, что содержится между этими строками:

В файле вида у нас имеются следующие части.

Верхняя:

В ней кроме заголовка есть поле для добавления нового элемента в список.

Главная (средняя) секция:

В ней содержится сам список, элементы для его редактирования и чекбокс групповых операций.

И нижняя часть:

Где мы можем видеть отображение различных счетчиков и фильтры.

Вся работа приложения Knockout основана на, известной нам уже концепции, Data-binding. Например, в главной секции мы видим  data-bind="visible: todos().length", что прописывает связь видимости элемента вида и наличия записей в списке todos. Если в списке не записей, то элемент будет полностью скрыт.

По тому же принципу работают и следующие эелемнты:

Думаю, что здесь интуитивно понятно между чем сделана связь.

Так же эта концепция используется для привязки событий.

Переменная $root служит для обращения к соотвествующей модели вида. editItem и remove - это методы модели вида.

Подобным образом реализуются и итераторы:

Здесь биндинг foreach использует результат полученнй от filteredTodos (описаного в модели вида) для отображения каждого пункта списка.

Похоже, что index.html практически на 100% понятен. Модель и модель вида так же не должны вызывать особых проблем при чтении кода.

Интересный код содержится над описанием модели в файле app.js:

Это иллистрация того, как можно создавать собсвенные data-binding.  Это очень гибкий инструмент, который выручает нас когда встроенных биндингов не хватает. Он хорошо описан в документации по custom bindings.

В данном же приложении (как мы видим выше) описан код для событий нажатия Enter, Escape, а так же для перехода отображения элемента в статус редактирования посредством вызова selectAndFocus.

В самом низу app.js есть еще несколько строк иннициализации:

Здесь в коде все прокомментировано. Отмечу лишь, что для роутинга здесь по-видимому используется библиотека director.js, а в блоке #filters можно видеть ссылки, использующие роутинг.

Итоги. Код на KnockoutJs предполагает меньший необходимый объем знаний для написания такого приложения. Тоесть мы еще раз убедились, что порог вхождения у него ниже чем у EmberJs. Однако data-bindings и конструкции  ko.observable() создают некоторый дискомфорт и могут приводить к известным проблемам с производительностью и нарушению связей между зависимыми величинами (об это писалось в предыдущей статье по Knockout). Последнее опять же говорит в пользу того, что фреймворк этот скорее для небольших приложений.

Оставить ответ