Start data variable component

src/dom_components/index.ts

@@ -101,6 +101,8 @@ import ComponentVideoView from './view/ComponentVideoView';
 import ComponentView, { IComponentView } from './view/ComponentView';
 import ComponentWrapperView from './view/ComponentWrapperView';
 import ComponentsView from './view/ComponentsView';
+import ComponentDataVariable, { type as typeVariable } from './model/ComponentDataVariable';
+import ComponentDataVariableView from './view/ComponentDataVariableView';
 
 export type ComponentEvent =
   | 'component:create'
@@ -165,6 +167,11 @@ export interface CanMoveResult {
 
 export default class ComponentManager extends ItemManagerModule<DomComponentsConfig, any> {
   componentTypes: ComponentStackItem[] = [
+    {
+      id: typeVariable,
+      model: ComponentDataVariable,
+      view: ComponentDataVariableView,
+    },
     {
       id: 'cell',
       model: ComponentTableCell,

src/dom_components/model/ComponentDataVariable.ts

@@ -0,0 +1,19 @@
+import { toLowerCase } from '../../utils/mixins';
+import Component from './Component';
+
+export const type = 'data-variable';
+
+export default class ComponentDataVariable extends Component {
+  get defaults() {
+    return {
+      // @ts-ignore
+      ...super.defaults,
+      type,
+      source: '',
+    };
+  }
+
+  static isComponent(el: HTMLElement) {
+    return toLowerCase(el.tagName) === type;
+  }
+}

src/dom_components/view/ComponentDataVariableView.ts

@@ -0,0 +1,19 @@
+import ComponentDataVariable from '../model/ComponentDataVariable';
+import ComponentView from './ComponentView';
+
+export default class ComponentDataVariableView extends ComponentView<ComponentDataVariable> {
+  initialize(opt = {}) {
+    super.initialize(opt);
+    const { model, em } = this;
+    const { key } = model.attributes;
+    this.listenTo(em, key, () => this.postRender());
+  }
+
+  postRender() {
+    const { key, default: def } = this.model.attributes;
+    // this.el.innerHTML = getValue(key, def);
+    this.el.innerHTML = def;
+    console.log('this.el.innerHTML', { key, def });
+    super.postRender();
+  }
+}