Creating a custom directive #1815
-
|
Hi, I need to bind to element properties instead of attributes, and the only way I found to achieve this task was creating a custom directive called Let's say my element have a custom property called <body x-data="data"
ps-init>
<my-element x-prop:myprop="obj"></my-element>
<script>
const data = {
obj: {
key1: 'value1',
key2: 'value2'
}
}
</script>
</body>I wrote the code below for my custom directive. Alpine.directive('prop', (el: any, { value, expression }: any, { effect }: any) => {
const evaluate = Alpine.evaluateLater(el, expression);
effect(() => evaluate((result: any) => {
if (!el._x_bindings) el._x_bindings = Alpine.reactive({});
el._x_bindings[value] = result;
Alpine.mutateDom(() => {
el[value] = result;
});
}));
});The code is working, but when it evaluates the expression, the Is there a way I can access the proxy's target from the Fabiano |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
I think you want to use |
Beta Was this translation helpful? Give feedback.
-
|
I tried on codepen (https://codepen.io/fabianobonin/pen/WNjEXBX), but codepen console probably stringfy the result of You can check there is a proxy in the element's property with:
<html lang="en">
<head>
<meta charset="UTF-8">
<script defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body x-data="data"
ps-init>
<my-element x-prop:myprop="obj"></my-element>
<script>
const data = {
obj: {
key1: 'value1',
key2: 'value2'
}
}
document.addEventListener('alpine:init', () => {
Alpine.directive('prop', (el, { value, expression }, { effect }) => {
const evaluate = Alpine.evaluateLater(el, expression);
effect(() => evaluate((result) => {
Alpine.mutateDom(() => {
el[value] = result;
});
}));
});
});
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Okay, so yeah as I mentioned, you should be able to use the proxy as you would any object. But if you want to remove the reactivity, you can unwrap it using Alpine.directive('prop', (el, { value, expression }, { Alpine: { raw }, effect })
[...]
el[value] = raw(result)Is that what you want? |
Beta Was this translation helpful? Give feedback.
-
|
Kevin, aparently Now it is storing the original object instead of the proxy. Alpine.mutateDom(() => {
el[value] = Alpine.raw(result);
});Thanks for your support! Fabiano |
Beta Was this translation helpful? Give feedback.
-
|
Wrote my message at the same time as you... Thanks again, I will check if I really need to use the raw object. My custom property is an array of objects, and each time the user adds an element to the array, Alpine is creating a proxy over a proxy and so on... So at the end, if I add 10 elements, I have a proxy with 10 levels on the first element. Best regards, Fabiano |
Beta Was this translation helpful? Give feedback.
-
|
Here is the final code: // Custom 'x-prop' directive for property binding ('x-bind' binds to attributes)
Alpine.directive('prop', (el, { value, expression }, { Alpine: { evaluateLater, mutateDom, raw }, effect }) => {
const evaluate = evaluateLater(el, expression);
effect(() => evaluate((result) => {
mutateDom(() => {
// The value property on <input> element doesn't accept null or undefined
if (result == null && el instanceof HTMLInputElement) {
el.value = '';
} else {
el[value] = raw(result);
}
});
}));
}); |
Beta Was this translation helpful? Give feedback.
I think you want to use
closestRoot(el)instead ofel. If you get stuck and put it on codepen or elsewhere I can show you