Decorators

Decorators are designed to make it easier to work with UI components.
Adding event handlers, state changes, and component status.

import { component, watch, hook } from 'jodit/core/decorators';
import { UIElement } from 'jodit/ui';

@component
class UISomeReactElement extends UIElement {
  state = {
    color: 'red',
    counter: 1
  };

  render(): string {
    return `<div>
            This text must be colored <span class="&__counter"></span>
        </div>`;
  }

  @hook('ready')
  @watch('state.color')
  onChangeColor(): void {
    this.container.style.color = this.state.color;
  }

  @hook('ready')
  @watch('state.counter')
  onChangeColor(): void {
    this.getElm('counter').innerText = this.state.counter.toString();
  }
}

const elm = new UISomeReactElement(jodit);
elm.state.color = 'yellow';
elm.state.counter = 55;

autobind

autobind<TFunction>(target): void | TFunction

Type parameters

Name Type
TFunction extends Function

Parameters

Name Type
target TFunction

Returns

void | TFunction

Defined in

autobind-decorator/index.d.ts:1

autobind<T>(target, propertyKey, descriptor): void | TypedPropertyDescriptor<T>

Type parameters

Name
T

Parameters

Name Type
target Object
propertyKey string | symbol
descriptor TypedPropertyDescriptor<T>

Returns

void | TypedPropertyDescriptor<T>

Defined in

autobind-decorator/index.d.ts:1