Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Структура MVC и MVVM (https://javascript.ru/forum/extjs/64205-struktura-mvc-i-mvvm.html)

potkin 26.07.2016 21:38

Структура MVC и MVVM
 
До этого юзал сугубо MVC. Там всё просто и примеров навалом и все в таком виде:
1) Создаются 4 директории: view, model, store и controller
2) Структура файла app.js:
Ext.application({
    name: "XXX",
    appFolder: 'Content/app',

    views: [ ... ],
    models: [ ... ],
    stores: [ ... ],
    controllers: [ ... ],

    viewport: {
        ...
    },

    launch: function () {
        ...
    }
});


А вот с паттерном MVVM ничего понять не могу.
Где хранить: View, ViewController и ViewModel? А то в примерах всё накидано в одну кучу (одну директорию)
Есть ли вообще файл app.js? Если есть, то какова его структура?

Может кто-то подсказать как MVVM реализовано в ExtJS?

potkin 27.07.2016 19:45

Сижу разбираюсь в примерах с англо-язычных сайтов ...
В app.js (MVVM) для ViewModel и ViewController надо объявлять так:
requires: ['ViewModel', 'ViewController']

При том во всех примерах структура директорий и app.js файла разная, нет общепринятой типизации, как в MVC.
Например предлагают все типы оформлять в одной директории (Вьюху, ВьюМодель и ВьюКонтролер).
И т.д.

nohuhu 27.07.2016 20:10

Для MVC была техническая причина рекомендовать определённую структуру директорий в проекте: разрешение имён файлов по классам. Точнее, это было сделано не только и не столько даже для MVC, сколько для динамического загрузчика Ext.Loader. Cmd в те времена не было, и для того, чтобы иметь возможность задавать классы моделей и контроллеров по короткому имени, нужно было, чтобы файлы с этими классами легко было найти. Отсюда app/model/*, app/controller/*, etc.

ViewController и ViewModel добавляли уже сильно позже, когда появилась Cmd и организация структуры директорий в проекте стала, в сущности, вопросом организационным. Техническая надобность отпала, т.к. Cmd всё равно найдёт все файлы и составит дерево зависимостей.

TL;DR Придумайте себе структуру, которая вам по душе, и придерживайтесь её. Примеры есть в KitchenSink, но это просто примеры и придерживаться их не обязательно.

potkin 27.07.2016 20:59

nohuhu,
ЦМД не пользуюсь, но в принципе ясно ...

В MVC у View был itemId, по которому в Контроллере задействовались методы. А в MVVM так:
1) Для кнопок нужно объявить toggleHandler: 'onBtnNameClick'
2) Для, например treelist нужен "слушатель" listeners: { itemclick: 'onTreelisttemClick' }
3) И т.д.

Зоопарк одним словом или я что-то не понимаю?

nohuhu 28.07.2016 20:46

Цитата:

Сообщение от potkin (Сообщение 423581)
nohuhu,
ЦМД не пользуюсь, но в принципе ясно ...

Зря.

Цитата:

В MVC у View был itemId, по которому в Контроллере задействовались методы. А в MVVM так:
1) Для кнопок нужно объявить toggleHandler: 'onBtnNameClick'
2) Для, например treelist нужен "слушатель" listeners: { itemclick: 'onTreelisttemClick' }
3) И т.д.

Зоопарк одним словом или я что-то не понимаю?
И то, и другое. В старом MVC были только глобальные контроллеры, которые слушали события от *всех* компонентов, и выбирали "свои" события по глобальному селектору. Для того, чтобы не ловить лишние события, селектор нужно было делать максимально избирательным; отсюда рекомендация использовать itemId для идентификации нужных компонентов.

В "новом" MVC есть ViewController, который привязывается к своему view и ловит события только внутри иерархии своего view. Для реакции на события используются методы ViewController, и в конфигурации view вы задаёте названия этих методов.

Что касается toggleHandler и itemclick, то это очень разные вещи. Во-первых, toggleHandler применим только к кнопкам-переключателям; во-вторых, он срабатывает при смене состояния, а не при клике. Вам никто не мешает слушать событие click на кнопках, но обычно для переключателей интересен именно момент смены состояния.

Исторически в Ext для активных компонентов предлагалось два варианта информирования о событиях: собственно событие, на которое можно подписаться (в данном случае toggle), или функция callback, которую можно было указать в конфигурации компонента (toggleHandler). В современном Ext для callback вместо функции можно указать имя метода в ViewController.

Оба варианта функционально идентичны:

Код:

{
    xtype: 'button',
    text: 'foo',
    enableToggle: true,
    toggleHandler: 'onFooToggle'
}, {
    xtype: 'button',
    text: 'bar',
    enableToggle: true,
    listeners: {
        toggle: 'onBarToggle'
    }
}

В TreeList смены состояния нет, поэтому слушайте событие itemclick.


Часовой пояс GMT +3, время: 08:23.