archtechx/alpine-reactive
1
0
Fork 0
mirror of https://github.com/archtechx/alpine-reactive.git synced 2025-12-12 08:24:03 +00:00
Code Activity

readme clarity

Browse source
This commit is contained in:
Samuel Štancl 2021-05-16 22:16:55 +02:00
parent f0834bcfdb
commit 8b03ec7551
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -7,14 +7,14 @@ This package provides a reactivity layer for Alpine 2.x.
When you create a component that uses a value defined outside of it, you can modify the value from Alpine, but not vice versa: When you create a component that uses a value defined outside of it, you can modify the value from Alpine, but not vice versa:
```html ```html
<div x-data="{ counter: window.clickCount "}> <div x-data="{ counter: window.clickCount }">
<button @click="counter++">+</button> <button @click="counter++">+</button>
Click count: <span x-text="count" /> Click count: <span x-text="count" />
<button @click="counter++">--</button> <button @click="counter++">--</button>
</div> </div>
``` ```
Clicking the buttons **will** update `window.clickCount`. However when `window.clickCount` is modified outside of the component, Alpine won't notice, and won't re-render the DOM. Clicking the buttons **will** update `window.clickCount`. However when `window.clickCount` is modified outside of the component, Alpine **won't** notice, and won't re-render the DOM.
Only after something else triggers a re-render, Alpine will show the correct click count again. Only after something else triggers a re-render, Alpine will show the correct click count again.
@ -26,6 +26,8 @@ One difference between this package's solution and Vue's `reactive()` is that Al
## Demo ## Demo
[View online](https://archtechx.github.io/alpine-reactive/demo.html)
```html ```html
<script> <script>
window.counter = reactive({ window.counter = reactive({
@ -40,7 +42,9 @@ One difference between this package's solution and Vue's `reactive()` is that Al
</div> </div>
``` ```
Under the hood, this creates a proxy that forwards everything to `window.clickCount`, but Under the hood, this creates a proxy that forwards everything to `window.clickCount`, but observes changes made to `window.clickCount` and updates the component as needed.
Of course, you may use the same reactive proxy in multiple components.
## Full API ## Full API