| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <html>
- <!-- <script src="./packages/intersect/dist/cdn.js" defer></script>
- <script src="./packages/morph/dist/cdn.js" defer></script>
- <script src="./packages/history/dist/cdn.js"></script>
- <script src="./packages/persist/dist/cdn.js"></script>
- <script src="./packages/focus/dist/cdn.js"></script>
- <script src="./packages/mask/dist/cdn.js"></script>
- <script src="./packages/ui/dist/cdn.js" defer></script> -->
- <script src="./packages/alpinejs/dist/cdn.js" defer></script>
- <!-- <script src="//cdn.tailwindcss.com"></script> -->
- <script src="//cdn.tailwindcss.com"></script>
- <div x-data="{ users: [{ name: 'lebowski' }] }">
- <template x-for="(user, idx) in users">
- <span x-text="users[idx].name" x-yo></span>
- </template>
- <button @click="users = []">Reset</button>
- </div>
- <!-- Play around here... -->
- <div x-data>
- <div id="thing" x-yo>i do not belong here...</div>
- <br>
- <br>
- <br>
- <br>
- <button @click="document.getElementById('thing').remove()">remove</button>
- </div>
- <script>
- document.addEventListener('alpine:init', () => {
- Alpine.directive('yo', (el, {}, { cleanup }) => {
- cleanup(() => {
- console.log('removed')
- })
- })
- })
- </script>
- <div x-data="{ users: [{ name: 'lebowski' }] }">
- <template x-for="(user, idx) in users">
- <span x-text="users[idx].name" x-yo></span>
- </template>
- <button @click="users = []">Reset</button>
- </div>
- </html>
|
