@alpinejs/docs 3.8.0-revision.2 → 3.8.0-revision.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/docs",
-    "version": "3.8.0-revision.2",
+    "version": "3.8.0-revision.3",
     "description": "The documentation for Alpine",
     "author": "Caleb Porzio",
     "license": "MIT"

package/src/en/directives/bind.md

@@ -157,9 +157,9 @@ And like most expressions in Alpine, you can always use the result of a JavaScri
 <a name="bind-directives"></a>
 ## Binding Alpine Directives Directly
 
-`x-bind` allows you to bind an object of different properties to an element.
+`x-bind` allows you to bind an object of different directives and attributes to an element.
 
-The object keys are the directives (can be any directive including modifiers), and the values are callbacks to be evaluated by Alpine.
+The object keys can be anything you would normally write as an attribute name in Alpine. This includes Alpine directives and modifiers, but also plain HTML attributes. The object values are either plain strings, or in the case of dynamic Alpine directoves, callbacks to be evaluated by Alpine.
 
 ```alpine
 <div x-data="dropdown()">

package/src/en/globals/alpine-bind.md

@@ -0,0 +1,36 @@
+---
+order: 3
+title: bind()
+---
+
+# Alpine.bind
+
+`Alpine.bind(...)` provides a way to re-use [`x-bind`](/directives/bind#bind-directives) objects within your application.
+
+Here's a simple example. Rather than binding attributes manually with Alpine:
+
+```alpine
+<button type="button" @click="doSomething()" :disabled="shouldDisable"></button>
+```
+
+You can bundle these attributes up into a reusable object and use `x-bind` to bind to that:
+
+```alpine
+<button x-bind="SomeButton"></button>
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.bind('SomeButton', () => ({
+            type: 'button',
+
+            '@click'() {
+                this.doSomething()
+            },
+
+            ':disabled'() {
+                return this.shouldDisable
+            },
+        }))
+    })
+</script>
+```

package/src/en/globals/alpine-data.md

@@ -3,7 +3,7 @@ order: 1
 title: data()
 ---
 
-# `Alpine.data`
+# Alpine.data
 
 `Alpine.data(...)` provides a way to re-use `x-data` contexts within your application.
 

package/src/en/globals/alpine-store.md

@@ -3,7 +3,7 @@ order: 2
 title: store()
 ---
 
-# `Alpine.store`
+# Alpine.store
 
 Alpine offers global state management through the `Alpine.store()` API.