From 85dd889c67a836e21fad29763f391af9c26806da Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 10 Apr 2024 15:51:38 -0400
Subject: [PATCH] update sort docs

---
 packages/docs/src/en/plugins/sort.md | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/docs/src/en/plugins/sort.md b/packages/docs/src/en/plugins/sort.md
index 4f887c652..b45f84a25 100644
--- a/packages/docs/src/en/plugins/sort.md
+++ b/packages/docs/src/en/plugins/sort.md
@@ -78,26 +78,36 @@ The primary API for using this plugin is the `x-sort` directive. By adding `x-so
 You can react to sorting changes by passing a handler function to `x-sort` and adding keys to each item using `x-sort:key`. Here is an example of a simple handler function that shows an alert dialog with the changed item's key and its new position:
 
 ```alpine
-<div x-data="{ handle(key, position) { alert(key + ' - ' + position)} }">
-    <ul x-sort="handle">
+<ul x-sort="alert($key + ' - ' + $position)">
+    <li x-sort:key="1">foo</li>
+    <li x-sort:key="2">bar</li>
+    <li x-sort:key="3">baz</li>
+</ul>
+```
+
+<!-- START_VERBATIM -->
+<div x-data>
+    <ul x-sort="alert($key + ' - ' + $position)">
         <li x-sort:key="1">foo</li>
         <li x-sort:key="2">bar</li>
         <li x-sort:key="3">baz</li>
     </ul>
 </div>
-```
+<!-- END_VERBATIM -->
 
-<!-- START_VERBATIM -->
-<div x-data="{ handle(key, position) { alert(key + ' - ' + position)} }">
+The `x-sort` handler will be called every time the sort order of the items change. The `$key` magic will contain the key of the sorted element (derived from `x-sort:key`), and `$position` will contain the new position of the item (staring at index `0`).
+
+You can also pass a handler function to `x-sort` and that function will receive the `key` and `position` as the first and second parameter:
+
+```alpine
+<div x-data="{ handle: (key, position) => { ... } }">
     <ul x-sort="handle">
         <li x-sort:key="1">foo</li>
         <li x-sort:key="2">bar</li>
         <li x-sort:key="3">baz</li>
     </ul>
 </div>
-<!-- END_VERBATIM -->
-
-As you can see, the `key` and `position` parameters are passed into the handler function on every sorting change. The `key` parameter is the value provided to `x-sort:key`, and the `position` parameter is its new position in the list of children (starting at index `0`).
+```
 
 Handler functions are often used to persist the new order of items in the database so that the sorting order of a list is preserved between page refreshes.