Alpine.data:
<div x-data="dropdown">
<!-- ... -->
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('dropdown', () => ({
open: false,
toggle() {
this.open = ! this.open
}
}))
})
</script>
Alpine.store:
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('darkMode', {
on: false,
toggel() {
this.on = ! this.on
}
})
})
</script>
Alpine.bind:
Apline.bind()
를 사용하면 x-bind
객체를 재사용가능하게 할 수 있다.
<button x-bind="SomeButton"></button>
<script>
document.addEventListener('alpine:init', () => {
Alpine.bind('SomeButton', () => ({
type: 'button',
'@click'() {
this.doSomething()
},
':disabled'() {
return this.shouldDisable
},
}))
})
</script>