В большинстве инфраструктур javascript есть компоненты с интерфейсом «data down, callback up», что эквивалентно этому в Sencha ExtJS?

Question

У меня есть опыт работы с Angular/Ember/React, и в каждой из этих фреймворков у вас есть четкое представление о компоненте, который принимает аргумент как исходные данные и обратные вызовы как ссылку на родителя (я считаю, что в Ember его называют «Data down, action up «). Я пытался изучить ExtJS, но я не вижу, что я должен использовать в качестве эквивалента этого интерфейса, как должна выглядеть связь между вложенными компонентами?

Answer 1

Общий шаблон в Ext для передачи исходных данных через параметр объекта. Свойства переданного объекта соответствуют config object in the class definition.

Ext автоматически создает методы getter и setter для всех свойств объекта конфигурации, а также apply and update methods для преобразования значений до и после их установки.

Для связи между компонентами вы можете подключить listeners, которые обрабатывают события, запускаемые из вложенного компонента. События могут быть стандартными, предоставляемыми Ext (например, «щелчок», снятый с Ext.button.Button) или пользовательские, которые вы составляете и отправляете с помощью fireEvent.

Другим способом связи между компонентами является использование родительского view model и bind config компонента.

Просмотреть модели приходят с выгодой от visible by all descendant components, поэтому дочерние компоненты могут привязываться к свойству модели представления, которое, если оно не найдено на самом дочернем компоненте, будет распространено по цепочке предков до тех пор, пока соответствующее свойство модели представления не будет найденный.

Answer 2

1. Исходные данные

   • В Ext JS каждый компонент принимает объект JSON в качестве его исходных данных конфигурации.

   • Вы даже можете установить конфигурации с помощью метода initComponent, связанного с каждым создаваемым компонентом. Метод шаблона initComponent является важным этапом инициализации для компонента. Метод initComponent создаваемого класса вызывается первым, с каждым методом initComponent до тех пор, пока не будет вызвана иерархия для Ext.Component. Это упрощает реализацию и, при необходимости, переопределяет логику конструктора Компонента на любом этапе иерархии.

   Ext.create('Ext.Component', { html: 'Hello world!', width: 300, height: 200, padding: 20, style: { color: '#FFFFFF', backgroundColor:'#000000' }, renderTo: Ext.getBody() });

2. Обмен данными между компонентами.

   • В Ext JS связь между компонентами осуществляется через событие (listeners и fireEvent с конфигурацией прослушивания).

   • Связь может быть также между дочерними и родительскими ViewModels. Наиболее часто используемым аспектом ViewModel является метод связывания. Этот метод принимает «дескриптор связывания» и обратный вызов для вызова, когда данные, указанные дескриптором связывания, становятся доступными или изменяются.

Каждый компонент может быть связан с ViewModel и контроллером. Они наиболее часто используются один раз.