-
|
I am trying to create super-simple component system in Alpine.js, the plugin is simple as follows
export default function(Alpine) {
Alpine.directive("template", (el, { value: name }, { }) => {
customElements.define(
`x-${name}`,
class extends HTMLElement {
constructor() {
super();
const template = el.content;
this.appendChild(template.cloneNode(true));
}
}
);
});
}
<html>
<script src="./packages/weisshorn/dist/cdn.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<template x-data x-template:counter>
<button @click ="count++">Increment</button>
<span x-text="count"></span>
</template>
<div x-data="{ count: 0 }">
<x-counter />
</div>
</html>everytime i clicked on the button |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
I don't know, but what happens if you just put |
Beta Was this translation helpful? Give feedback.
-
|
You need to wrap the appendChild inside Alpine.mutateDom otherwise directives are evaluated twice (one time because the component is initialising and the other one because of Alpine mutation observer) |
Beta Was this translation helpful? Give feedback.
-
export default function(Alpine) {
Alpine.directive("template", (el, { value: name }, { }) => {
customElements.define( `x-${name}`, class extends HTMLElement {
constructor() {
super();
const template = el.content;
Alpine.mutateDom(() =>
this.appendChild(
template.cloneNode(true)
);
});
}
});
});
} |
Beta Was this translation helpful? Give feedback.
-
|
Voy g |
Beta Was this translation helpful? Give feedback.
You need to wrap the appendChild inside Alpine.mutateDom otherwise directives are evaluated twice (one time because the component is initialising and the other one because of Alpine mutation observer)