@kevinbatdorf/alpine-observe-other-components
v0.1.0
Published
A lightweight observer function for Alpine.js that lets you monitor state on other Alpine components
Downloads
3
Readme
Alpine — Observe Other Components
A lightweight observer function for Alpine.js that lets you monitor state on other Alpine components, including parent components.
About
Useful when you want to watch updates on child elements, or when you need to watch state in general.
Watch everything
Add x-alpine-observe attribute with the function name. Each component with this attribute will watch all other components and run your function every time.
<div x-data="{text:'bar'}" @click="text = 'baz'" x-text="text"></div>
<!-- The component below is watching the component above for changes -->
<div x-data="{foo:'bar', go(details) { this.foo = details.data[0].text }}" x-alpine-observe="go" x-text="foo">Watch only specific components
Add x-alpine-observe attribute with an object to specify a selector. Only components with this selector will be monitored for changes. Note that changes occur on initial load so the example below will first show 1, not 0.
<div
class="counters"
x-data="{text:'bar'}"
@click="text = text === 'baz' ? 'bar' : 'baz'"
x-text="text">Watched</div>
<div
x-data="{text:'bar'}"
@click="text = text === 'baz' ? 'bar' : 'baz'"
x-text="text">Not watched</div>
<!-- The component below is watching only the component above with a class of counters for changes -->
<div
x-data="{count:0, go(details) { this.count++ }}"
x-alpine-observe="{selector: '.counters', callback: 'go'}"
x-text="count"></div>Watch parent components
Similar to above, you can scope the child to only watch the parent for changes.
<div
id="parent"
x-data="{text: 'parent'}">
<div>
Parent: <button
@click="text = text === 'parent' ? 'also parent' : 'parent'"
x-text="text"></button>
</div>
<div>
Nested <button
x-data="{text: 'child', getDataFromParent(details) { this.text = `${details.data[0].text}` }}"
x-alpine-observe="{selector: '#parent', callback: 'getDataFromParent'}"
@click="text = text === 'child' ? 'also child' : 'child'">
<span x-text="text"></span>
</button>
</div>
</div>Installation
Include the following <script> tag in the <head> of your document (before Alpine):
<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/[email protected]/dist/index.js"></script>Manual
If you wish to create your own bundle:
npm install kevinbatdorf/alpine-observe-other-components --saveThen add the following to your script:
import 'alpine-observe-other-components'
import 'alpinejs'License
Copyright (c) 2020 Kevin Batdorf
Licensed under the MIT license, see LICENSE.md for details.