ko.Widget - строительный материал веб-приложения [ko.Widget is building block for your web application]

Разрабатывая сложный UI легко превратиться в макаронных дел мастера, особенно если этот проект разрабатывается по правилу ЗЗЗ (украинский: Задеплоїв Здав Забув). Но это не наш путь. Что делать что бы избежать сложности, монолитности, неповоротливости кода - разделяй и властвуй. Для этого knockoutjs и widget'ы к нам спешат на помощь.

Проблема

Knockoutjs очень не плох, настоящий MVVM, продвинутый биндинг, гибкий шаблонизатор, мега расширяем сам по себе, бла-бла-бла. Но чего мне в нем не хватает, так это способа полностью изолировать/слить View'шки и ViewModel'и в "нечто" - виджет или контрол. Что бы далее можно было этот виджет:

• создать, без необходимости знать о всех его потрохах (View'шки и ViewModel'и, разные сторонние либы: jQueryUI, Accordion, Autocomplete, jQGrid и т.д.)
• повторно использовать;
• динамически загружать (например по требованию, или подменять определенное место на странице в зависимости от URL - актуально для Single Page Application)

Пример проблемного UI

[Почтовый ящик пользователя]            [Данные о пользователе]
[Контент в зависимости от URL]
[Лента новостей]                          [Лента событий пользователя]

Проблема в том что здесь 5 разных виджетов, из них 1 динамически подгружаем (Контент в зависимости от URL), 2 очень похожих (Лента новостей, Лента событий пользователя). Без виджетов в Knockoutjs пришлось бы нелегко, возможно, но готового решения нет.


Решение
ko.widget (https://github.com/gaevoy/ko.widget) - контейнер для View'шки и ViewModel'и.
Вот так смотрится код готового виджета:

• расширяем функциональность наследованием от базового виджета ko.widget, строка 5
• создаем ViewModel'ь, строка 6
• создаем View'шку, строка 7

 

Готово! Вставить виджет можно используя биндинг inject (который находится в ko.widget) об этом далее.

Вернемся к примеру. Применив ko.widget получим такую структуру приложения:

  

Каждый виджет лежит в своей папке, тут и View'шки и ViewModel'и можно добавить файл стилей (css, less, sass), картинки и т.д.

EntryPoint.js - это точка входа в приложения, код который конфигурирует RequireJS, создает главный виджет RootWidget и добавляет его в корень dom-дерева - в body.

RootViewModel и RootView - пример создания виджета и добаления его в dom-дерево биндингом inject, так же в строках 10-11 пример повторного использования виджета, а в 13-17 пример создания виджета по требованию:

Лучше один раз увидеть, чем сто раз услышать: рабочий пример http://gaevoy.github.io/ko.widget/demo/ver_1.0/Example.htm, смотреть с включенным firebug'ом интересней :)

А также все исходники https://github.com/gaevoy/ko.widget.