-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (40 loc) · 1.15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Alpine.js Demo with Module</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body x-data>
<div
x-text="`Full name: ${$store.page.firstName} ${$store.page.lastName}`"
></div>
Products
<ul>
<template x-for="(product, index) in $store.page.products">
<li x-text="product"></li>
</template>
</ul>
<input
type="text"
x-model="$store.page.firstName"
placeholder="First name"
/>
<input type="text" x-model="$store.page.lastName" placeholder="Last name" />
<script type="module">
import alpinejs from 'https://cdn.jsdelivr.net/npm/alpinejs@3.12.2/+esm';
function page() {
return {
firstName: 'Steve',
lastName: 'Jobs',
company: 'Apple',
products: ['iPhone', 'iPod', 'iPad', 'Macbook', 'iWatch'],
};
}
document.addEventListener('alpine:init', () => {
alpinejs.store('page', page());
});
alpinejs.start();
</script>
</body>
</html>