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(); }}
If you like Jodit - try Jodit PRO
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:
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:
The context can be specified as a path to an object, and even as the name of a BEM interface element
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
The first argument can be an array: