Watch for something decorator

The decorator allows you to hang handlers on changes to the internal fields of the component, as well as on any events [[EventEmitter]]

For example, we will make a reactive component that will change its color when its field changes:

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

@component()
class UISomeReactElement extends UIElement {
state = {
color: 'red'
};

render(): string {
return `<div>
This text must be colored
</div>`;
}

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

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

The decorator can also be used to hang event handlers [[EventEmitter]]

Then the call signature has its own syntax:

  • :{EVENT}
  • {CONTEXT}:{EVENT}
  • {CONTEXT}:{EVENT.NAMESPACE}

For example, this is how you can hang a click handler on the component container:

@component()
class UIButtonElement extends UIElement {
state = {
counter: 0
};

render(): string {
return `<button>text</button>`;
}

@watch('container:click') // Same this.j.e(this.container, 'click', this.onClick.bind(this))
onClick(): void {
this.state.counter++;
}

@watch('state.counter')
onClick(): void {
this.container.innerText = `Clicked ` + this.state.counter;
}
}

The context can be specified as a path to an object, and even as the name of a BEM interface element

@component()
class UICard extends UIElement {
state = {
counter: 0
};

render(): string {
return `<div>
Clicked <span class="&__counter"></span>
<button class="&__card-button">Click</button>
</div>`;
}

@watch('card-button:click') // As this.j.e.on(this.getElm('card-button'), 'click', this.onClick.bind(this))
onClick(): void {
this.state.counter++;
}

@watch('jodit.editor:focus') // As this.j.e.on(this.j.editor, 'focus', this.onJoditEditorFocus.bind(this))
onJoditEditorFocus(): void {
alert('Focused');
}

@watch(':afterSetMode') // As this.j.e.on('afterSetMode', this.onAfterSetMode.bind(this))
onAfterSetMode(): void {
alert(this.jodit.mode);
}

@watch('state.counter')
onClick(): void {
this.getElm('counter').innerText = this.state.counter;
}
}

Also, the context can be set differently by setting it as the second parameter, or by setting the function as the second parameter that will return the context

@component()
class UICardExt extends UICard {
@watch(':click', ctx => ctx.getElm('card-button')) // As this.j.e.on(this.getElm('card-button'), 'click', this.onClick.bind(this))
onClick(): void {
this.state.counter++;
}
}

The first argument can be an array:

@component()
class UICardExt extends UICard {
@watch([
'card-button:click',
'card-button:mouseup',
'card-button:mousedown'
])
onMouseEvents(e): void {
e.preventDefault();
}
}

References

Functions

References

Renames and re-exports watch

Jodit PRO

If you like Jodit - try Jodit PRO