mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] parser: add support for custom directives
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
This commit is contained in:
committed by
Géry Debongnie
parent
968e96ad08
commit
7e687234bf
@@ -18,6 +18,7 @@
|
||||
- [Sub Templates](#sub-templates)
|
||||
- [Dynamic Sub Templates](#dynamic-sub-templates)
|
||||
- [Debugging](#debugging)
|
||||
- [Custom Directives](#custom-directives)
|
||||
- [Fragments](#fragments)
|
||||
- [Inline templates](#inline-templates)
|
||||
- [Rendering svg](#rendering-svg)
|
||||
@@ -80,6 +81,7 @@ needs. Here is a list of all Owl specific directives:
|
||||
| `t-slot`, `t-set-slot`, `t-slot-scope` | [Rendering a slot](slots.md) |
|
||||
| `t-model` | [Form input bindings](input_bindings.md) |
|
||||
| `t-tag` | [Rendering nodes with dynamic tag name](#dynamic-tag-names) |
|
||||
| `t-custom-*` | [Rendering nodes with custom directives](#custom-directives) |
|
||||
|
||||
## QWeb Template Reference
|
||||
|
||||
@@ -588,6 +590,35 @@ will stop execution if the browser dev tools are open.
|
||||
|
||||
will print 42 to the console.
|
||||
|
||||
### Custom Directives
|
||||
|
||||
Owl 2 supports the declaration of custom directives. To use them, 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);
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
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
|
||||
modified by the function.
|
||||
This :
|
||||
|
||||
```xml
|
||||
<div t-custom-test_directive="click" />
|
||||
```
|
||||
|
||||
will be replaced by :
|
||||
|
||||
```xml
|
||||
<div t-on-click="value"/>
|
||||
```
|
||||
|
||||
## Fragments
|
||||
|
||||
Owl 2 supports templates with an arbitrary number of root elements, or even just
|
||||
|
||||
Reference in New Issue
Block a user