mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Jorge Pinna Puissant
7e687234bf
This commit adds the support for custom directives. To use the
custom directive, an Object of functions needs to be configured on
the owl APP:
```js
new App(..., {
customDirectives: {
test_directive: function (el, value) {
el.setAttribute("t-on-click", value);
return el;
}
}
});
```
The functions will be called when a custom directive with the name of the
function is found. The original element will be replaced with the one
returned by the function.
This :
```xml
<div t-custom-test_directive="click" />
```
will be replace by :
```xml
<div t-on-click="value"/>
```
issue : https://github.com/odoo/owl/issues/1650
🦉 Owl overview 🦉
Here is a list of everything exported by the Owl library:
Main entities:
App: represent an Owl application (mainly a root component,a set of templates, and a config)Component: the main class to define a concrete Owl componentmount: main entry point for most application: mount a component to a targetxml: helper to define an inline template
Reactivity
useState: create a reactive object (hook, linked to a specific component)reactive: create a reactive object (not linked to any component)markRaw: mark an object or array so that it is ignored by the reactivity systemtoRaw: given a reactive objet, return the raw (non reactive) underlying object
Lifecycle hooks:
onWillStart: hook to define asynchronous code that should be executed before component is renderedonMounted: hook to define code that should be executed when component is mountedonWillPatch: hook to define code that should be executed before component is patchedonWillUpdateProps: hook to define code that should be executed before component is updatedonPatched: hook to define code that should be executed when component is patchedonWillRender: hook to define code that should be executed before component is renderedonRendered: hook to define code that should be executed after component is renderedonWillUnmount: hook to define code that should be executed before component is unmountedonWillDestroy: hook to define code that should be executed before component is destroyedonError: hook to define a Owl error handler
Other hooks:
useComponent: return a reference to the current component (useful to create derived hooks)useEffect: define an effect with its dependenciesuseEnv: return a reference to the current envuseExternalListener: add a listener outside of a component DOMuseRef: get an object representing a reference (t-ref)useChildSubEnv: extend the current env with additional information (for child components)useSubEnv: extend the current env with additional information (for current component and child components)
Utility/helpers:
EventBus: a simple event busloadFile: an helper to load a file from the servermarkup: utility function to define strings that represent html (should not be escaped)status: utility function to get the status of a component (new, mounted or destroyed)validate: validates if an object satisfies a specified schemawhenReady: utility function to execute code when DOM is readybatched: utility function to batch function calls