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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
order: 1
title: data()
---
# Alpine.data
`Alpine.data(...)` provides a way to re-use `x-data` contexts within your application.
Here's a contrived `dropdown` component for example:
```alpine
<div x-data="dropdown">
<button @click="toggle">...</button>
<div x-show="open">...</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('dropdown', () => ({
open: false,
toggle() {
this.open = ! this.open
}
}))
})
</script>
```
As you can see we've extracted the properties and methods we would usually define directly inside `x-data` into a separate Alpine component object.
<a name="registering-from-a-bundle"></a>
## Registering from a bundle
If you've chosen to use a build step for your Alpine code, you should register your components in the following way:
```js
import Alpine from `alpinejs`
import dropdown from './dropdown.js'
Alpine.data('dropdown', dropdown)
Alpine.start()
```
This assumes you have a file called `dropdown.js` with the following contents:
```js
export default () => ({
open: false,
toggle() {
this.open = ! this.open
}
})
```
<a name="initial-parameters"></a>
## Initial parameters
In addition to referencing `Alpine.data` providers by their name plainly (like `x-data="dropdown"`), you can also reference them as functions (`x-data="dropdown()"`). By calling them as functions directly, you can pass in additional parameters to be used when creating the initial data object like so:
```alpine
<div x-data="dropdown(true)">
```
```js
Alpine.data('dropdown', (initialOpenState = false) => ({
open: initialOpenState
}))
```
Now, you can re-use the `dropdown` object, but provide it with different parameters as you need to.
<a name="init-functions"></a>
## Init functions
If your component contains an `init()` method, Alpine will automatically execute it before it renders the component. For example:
```js
Alpine.data('dropdown', () => ({
init() {
// This code will be executed before Alpine
// initializes the rest of the component.
}
}))
```
<a name="using-magic-properties"></a>
## Using magic properties
If you want to access magic methods or properties from a component object, you can do so using the `this` context:
```js
Alpine.data('dropdown', () => ({
open: false,
init() {
this.$watch('open', () => {...})
}
}))
```
<a name="encapsulating-directives-with-x-bind"></a>
## Encapsulating directives with `x-bind`
If you wish to re-use more than just the data object of a component, you can encapsulate entire Alpine template directives using `x-bind`.
The following is an example of extracting the templating details of our previous dropdown component using `x-bind`:
```alpine
<div x-data="dropdown">
<button x-bind="trigger"></button>
<div x-bind="dialogue"></div>
</div>
```
```js
Alpine.data('dropdown', () => ({
open: false,
trigger: {
['@click']() {
this.open = ! this.open
},
},
dialogue: {
['x-show']() {
return this.open
},
},
}))
```
|
