Up listenToData

src/dataSources/types.ts

@@ -21,6 +21,11 @@ export interface DataRecordProps extends ObjectAny {
   id: string;
 }
 
+export interface DataVariableListener {
+  obj: any;
+  event: string;
+}
+
 /**{START_EVENTS}*/
 export enum DataSourcesEvents {
   /**

src/dom_components/view/ComponentDataVariableView.ts

@@ -1,12 +1,15 @@
-import { DataSourcesEvents } from '../../dataSources/types';
+import { DataSourcesEvents, DataVariableListener } from '../../dataSources/types';
 import { stringToPath } from '../../utils/mixins';
 import ComponentDataVariable from '../model/ComponentDataVariable';
 import ComponentView from './ComponentView';
 
 export default class ComponentDataVariableView extends ComponentView<ComponentDataVariable> {
+  dataListeners: DataVariableListener[] = [];
+
   initialize(opt = {}) {
     super.initialize(opt);
     this.listenToData();
+    this.listenTo(this.model, 'change:path', this.listenToData);
   }
 
   listenToData() {
@@ -15,16 +18,21 @@ export default class ComponentDataVariableView extends ComponentView<ComponentDa
     const normPath = stringToPath(path || '').join('.');
     const { DataSources } = em;
     const [ds, dr] = DataSources.fromPath(path);
+    const dataListeners: DataVariableListener[] = [];
+    const prevListeners = this.dataListeners || [];
+
+    prevListeners.forEach(ls => this.stopListening(ls.obj, ls.event, this.postRender));
 
-    if (ds) {
+    ds && dataListeners.push({ obj: ds.records, event: 'add remove reset' });
-      this.listenTo(ds.records, 'add remove reset', this.postRender);
+    dr && dataListeners.push({ obj: dr, event: 'change' });
-      this.listenTo(ds.records, 'add remove reset', this.postRender);
+    dataListeners.push(
-      dr && this.listenTo(dr, 'change', this.postRender);
+      { obj: model, event: 'change:path change:value' },
-    }
+      { obj: DataSources.all, event: 'add remove reset' },
+      { obj: em, event: `${DataSourcesEvents.path}:${normPath}` }
+    );
 
-    this.listenTo(DataSources.all, 'add remove reset', this.postRender);
+    dataListeners.forEach(ls => this.listenTo(ls.obj, ls.event, this.postRender));
-    this.listenTo(em, `${DataSourcesEvents.path}:${normPath}`, this.postRender);
+    this.dataListeners = dataListeners;
-    this.listenTo(model, 'change:path change:value', this.postRender);
   }
 
   postRender() {

test/specs/dataSources/index.ts

@@ -96,16 +96,26 @@ describe('DataSourceManager', () => {
     });
 
     test('component is properly updating on its path change', () => {
+      const eventFn1 = jest.fn();
+      const eventFn2 = jest.fn();
       const ds = addDataSource();
       const cmpVar = addDataVariable();
       const el = cmpVar.getEl()!;
+      const pathEvent = DataSourcesEvents.path;
+
       cmpVar.set({ path: 'ds1.id2.name' });
       expect(el.innerHTML).toBe('Name2');
+      em.on(`${pathEvent}:ds1.id2.name`, eventFn1);
+      ds.getRecord('id2')?.set({ name: 'Name2-UP' });
+
       cmpVar.set({ path: 'ds1[id3]name' });
       expect(el.innerHTML).toBe('Name3');
-
+      em.on(`${pathEvent}:ds1.id3.name`, eventFn2);
       ds.getRecord('id3')?.set({ name: 'Name3-UP' });
+
       expect(el.innerHTML).toBe('Name3-UP');
+      expect(eventFn1).toBeCalledTimes(1);
+      expect(eventFn2).toBeCalledTimes(1);
     });
 
     describe('DataSource changes', () => {