Update Russian translation for the documentation

PR for [issue #920 ](https://github.com/alpinejs/alpine/issues/920)

README.ru.md

@@ -4,13 +4,13 @@
 ![npm version](https://img.shields.io/npm/v/alpinejs)
 [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true)](https://alpinejs.codewithhugo.com/chat/)
 
-Alpine.js предлагает вам реактивность и декларативность таких больших фреймворков, как Vue или React, но за значительно меньшую цену.
+Alpine.js предоставляет реактивность и декларативность как в больших фреймворках вроде Vue или React, но с меньшими затратами.
 
 Вы сможете использовать обычный DOM, при этом изменяя поведение по своему усмотрению.
 
 Можете думать о Alpine.js как о [Tailwind](https://tailwindcss.com/) для JavaScript.
 
-> Замечание: синтаксис Alpine.js почти полностью заимствован из [Vue](https://vuejs.org/) (а, соответственно, и из [Angular](https://angularjs.org/)). Я безмерно благодарен разработчикам этих инструментов за тот вклад, который они внесли в Web.
+> Замечание: синтаксис Alpine.js почти полностью заимствован из [Vue](https://ru.vuejs.org/) (а, соответственно, и из [Angular](https://angularjs.org/)). Я безмерно благодарен разработчикам этих инструментов за тот вклад, который они внесли в Web.
 
 ## Установка
 
@@ -21,7 +21,7 @@ Alpine.js предлагает вам реактивность и деклара
 
 Вот и всё. Он инициализируется самостоятельно.
 
-Для продакшн-окружения, рекомендуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий.
+Для рабочего окружения рекомендуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий.
 Например, чтобы использовать версию `2.7.3`:
 ```html
 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
@@ -43,20 +43,20 @@ import 'alpinejs'
 <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
 ```
 
-Паттерн, использующийся выше, называется [паттерн module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/). Он позволяет автоматически загружать современный бандл в современных браузерах, а в IE11 и других устаревших браузерах – бандл для IE11.
+Паттерн, использующийся выше, называется [паттерн module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/). Он позволяет автоматически загружать современный пакет в современных браузерах, а в IE11 и других устаревших браузерах – пакет для IE11.
 
 ## Использование
 
-*Дропдаун/Модальное окно*
+*Выпадающий список/Модальное окно*
 ```html
 <div x-data="{ open: false }">
-    <button @click="open = true">Открыть дропдаун</button>
+    <button @click="open = true">Открыть</button>
 
     <ul
         x-show="open"
         @click.away="open = false"
     >
-        Содержимое дропдаун
+        Содержимое
     </ul>
 </div>
 ```
@@ -72,8 +72,8 @@ import 'alpinejs'
 </div>
 ```
 
-Alpine.js можно использовать и для более серьезных выражений:
-*Предзагрузка HTML-содержания дропдауна при наведении мыши*
+Alpine.js можно использовать и для более серьезных выражений. Например, *предзагрузка HTML-содержимого при наведении мыши*.
+
 ```html
 <div x-data="{ open: false }">
     <button
@@ -83,7 +83,7 @@ Alpine.js можно использовать и для более серьез
                 .then(html => { $refs.dropdown.innerHTML = html })
         "
         @click="open = true"
-    >Показать дропдаун</button>
+    >Показать</button>
 
     <div x-ref="dropdown" x-show="open" @click.away="open = false">
         Загрузка...
@@ -108,9 +108,9 @@ Alpine.js можно использовать и для более серьез
 | [`x-ref`](#x-ref) | Удобный способ получения DOM-элементов вашего компонента. |
 | [`x-if`](#x-if) | При невыполнении переданного условия полностью удаляет элемент из DOM. Должна использоваться в теге `<template>`. |
 | [`x-for`](#x-for) | Создает новые DOM узлы для каждого элемента в массиве. Должна использоваться в теге `<template>`. |
-| [`x-transition`](#x-transition) | Директивы для добавления классов различным стадиям перехода (transition) элемента. |
-| [`x-spread`](#x-spread) | Позволяет вам привязывать объект с директивами Alpine к элементам, улучшая переиспользуемость. |
-| [`x-cloak`](#x-cloak) | Удаляется при инициализации Alpine. Полезна для скрытия DOM до инициализации. |
+| [`x-transition`](#x-transition) | Директивы для добавления css-классов различным стадиям перехода (transition) элемента. |
+| [`x-spread`](#x-spread) | Позволяет привязывать объект с директивами Alpine к элементам, улучшая повторное использование кода. |
+| [`x-cloak`](#x-cloak) | Атрибут удаляется после инициализации Alpine. Используется для скрытия элементов до DOM инициализации. |
 
 И 6 магических свойств (magic properties):
 
@@ -130,17 +130,13 @@ Alpine.js можно использовать и для более серьез
 
 **Хочешь здесь своё лого? [Напиши мне сообщение в Twitter](https://twitter.com/calebporzio)**
 
-## VIP контрибьюторы
-
-<table>
-  <tr>
-    <td align="center"><a href="http://calebporzio.com"><img src="https://avatars2.githubusercontent.com/u/3670578?v=4" width="100px;" alt="Caleb Porzio"/><br /><sub><b>Caleb Porzio</b></sub></a><br /><sub>(Создатель)</sub></td>
-    <td align="center"><a href="https://github.com/HugoDF"><img src="https://avatars2.githubusercontent.com/u/6459679?v=4" width="100px;" alt="Hugo"/><br /><sub><b>Hugo</b></sub></a></td>
-    <td align="center"><a href="https://github.com/ryangjchandler"><img src="https://avatars2.githubusercontent.com/u/41837763?v=4" width="100px;" alt="Ryan Chandler"/><br /><sub><b>Ryan Chandler</b></sub></a></td>
-    <td align="center"><a href="https://github.com/SimoTod"><img src="https://avatars2.githubusercontent.com/u/8427737?v=4" width="100px;" alt="Simone Todaro"/><br /><sub><b>Simone Todaro</b></sub></a></td>
-  </tr>
-</table>
+## Сообщество проекта
 
+* [Еженедельная рассылка AlpineJS](https://alpinejs.codewithhugo.com/newsletter/)
+* [Spruce (глобальные данные между компонентами)](https://github.com/ryangjchandler/spruce)
+* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
+* [Alpine Magic Helpers (полезные хелперы для Alpine)](https://github.com/KevinBatdorf/alpine-magic-helpers)
+* [Awesome Alpine (ссылки на прочие проекты об Alpine)](https://github.com/ryangjchandler/awesome-alpine)
 
 ### Директивы
 
@@ -156,9 +152,9 @@ Alpine.js можно использовать и для более серьез
 
 Аналогична свойству `data` в компонентах Vue.
 
-**Извлечение логики компонента**
+**Задание логики компонента отдельной функцией**
 
-Вы можете извлечь данные (и поведение) в переиспользуемые функции:
+Можно получить данные (и задать поведение компонента) в повторно используемых функциях:
 
 ```html
 <div x-data="dropdown()">
@@ -181,7 +177,7 @@ Alpine.js можно использовать и для более серьез
 </script>
 ```
 
-> **Для пользователей бандлеров**. Alpine.js получает доступ к функциям только из глобальной области видимости (`window`). Вам необходимо явно присвоить свои функции объекту `window`, чтобы использовать их с `x-data`. Например, вот так: `window.dropdown = function () {}` (с Webpack, Rollup, Parcel и другими бандлерами функции, которые вы объявляете, по умолчанию принадлежать области видимости бандлера, а не `window`).
+> **Для пользователей бандлеров (bundler)**. Alpine.js получает доступ к функциям только из глобальной области видимости (`window`). Вам необходимо явно присвоить свои функции объекту `window`, чтобы использовать их с `x-data`. Например, вот так: `window.dropdown = function () {}` (с Webpack, Rollup, Parcel и другими бандлерами функции, которые вы объявляете, по умолчанию принадлежать области видимости бандлера, а не `window`).
 
 
 Вы также можете объединять несколько объектов с данными с помощью деструктуризации:
@@ -199,9 +195,9 @@ Alpine.js можно использовать и для более серьез
 
 `x-init` выполняет переданное выражение, когда компонент инициализируется.
 
-Если вы хотите выполнить код ПОСЛЕ первоначальных обновлений DOM Alpine (наподобие хука `mounted()` во VueJS), вы можете передать `x-init` колбэк, и он выполнит его после инициализации:
+Если вы хотите выполнить код ПОСЛЕ первоначальных обновлений DOM Alpine (наподобие хука `mounted()` во VueJS), то можете передать в `x-init` колбэк, и он выполнит его после инициализации:
 
-`x-init="() => { // здесь уже есть доступ к стейту после инициализации DOM // }"`
+`x-init="() => { // здесь уже есть доступ к состоянию после инициализации DOM // }"`
 
 ---
 
@@ -214,7 +210,7 @@ Alpine.js можно использовать и для более серьез
 
 **x-show.transition**
 
-`x-show.transition` – удобный API для добавления `x-show` CSS-переходов.
+`x-show.transition` – удобный API для добавления к `x-show` CSS-переходов (transitions).
 
 ```html
 <div x-show.transition="open">
@@ -260,7 +256,7 @@ Alpine.js можно использовать и для более серьез
 
 `x-bind` ведет себя немного иначе, когда привязан к атрибуту `class`.
 
-Для классов необходимо передавать объект, где ключи – это имена классов, а значения – логические выражения, которые определяют применяются эти классы или нет.
+Для css-классов необходимо передавать объект, где ключи – это имена классов, а значения – логические выражения, которые определяют применяются эти классы или нет.
 
 Например:
 `<div x-bind:class="{ 'hidden': foo }"></div>`
@@ -287,6 +283,13 @@ Alpine.js можно использовать и для более серьез
 
 Логические атрибуты поддерживаются в соответствии с [HTML спецификацией](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), такие как, например, `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open` и другие.
 
+> Замечание: Если нужно вернуть логическое (true/false) значение атрибута в виде текста, например для `aria-*`, используйте метод `.toString()`. Например `:aria-expanded="isOpen.toString()"` вернёт строку `true` или `false`в зависимости от значения `isOpen`.
+
+**Модификатор `.camel`**
+**Пример:** `<svg x-bind:view-box.camel="myVar">`
+
+Модификатор `camel` позволяет задать имя атрибута, которое будет преобразовано к синтаксису "camelCase". В данном примере значение будет присвоено атрибуту `viewBox`, а не `view-box`.
+
 ---
 
 ### `x-on`
@@ -297,11 +300,11 @@ Alpine.js можно использовать и для более серьез
 
 **Синтаксис:** `<button x-on:[событие]="[выражение]"></button>`
 
-`x-on` цепляет слушатель события на элемент, на котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение.
+`x-on` цепляет слушатель события на элемент, в котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение. Можно использовать `x-on` с любым событием. См. полный список событий в [документации MDN](https://developer.mozilla.org/en-US/docs/Web/Events).
 
-Если в этом выражении меняются какие-либо данные, другие элементы, "привязанные" к этим данным, будут обновлены.
+Если в этом выражении меняются какие-либо данные, другие элементы, "привязанные" к этим данным, также будут обновлены.
 
-> Замечание: Вы также можете задать имя JS-функции.
+> Замечание: Также можно задать имя JS-функции.
 
 **Пример:** `<button x-on:click="myFunction"></button>`
 
@@ -323,7 +326,7 @@ Alpine.js можно использовать и для более серьез
 
 При добавлении модификатора `.away` обработчик события сработает, только когда событие произошло на другом источнике, а не на этом элементе или его потомках.
 
-Это полезно для скрытия дропдаунов или модальных окон, когда пользователь кликает в другом месте.
+Это полезно для скрытия дропдаунов или модальных окон, когда пользователь кликает в другом месте экрана.
 
 **Модификатор `.prevent`**
 
@@ -335,19 +338,19 @@ Alpine.js можно использовать и для более серьез
 
 **Пример:** `<div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>`
 
-При добавлении `.stop` обработчик вызовет `stopPropagation` на сработавшем событии. В примере выше это приведет к тому, что событие "click" не всплывет от кнопки внешнему `<div>`. Другими словами, когда пользователь нажимает на кнопку, `foo` не устанавливается в `'bar'`.
+При добавлении `.stop` обработчик вызовет `stopPropagation` на сработавшем событии. В примере выше это приведет к тому, что событие "click" не всплывет от кнопки к внешнему `<div>`. Другими словами, когда пользователь нажимает на кнопку, `foo` не устанавливается в `'bar'`.
 
 **Модификатор `.self`**
 
 **Пример:** `<div x-on:click.self="foo = 'bar'"><button></button></div>`
 
-При добавлении `.self` обработчик события сработает, только если `$event.target` – это сам элемент. В примере выше это приведет к тому, что событие "click", всплыв от кнопки внешнему `<div>`, **не** вызовет обработчик.
+При добавлении `.self` обработчик события сработает, только если `$event.target` – это сам элемент. В примере выше это приведет к тому, что событие "click", всплыв от кнопки к внешнему `<div>`, **не** вызовет его обработчик.
 
 **Модификатор `.window`**
 
 **Пример:** `<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>`
 
-При добавлении `.window` прослушиватель события установится не на узел DOM, на котором был вызван, а на глобальный объект window. Это полезно, когда нужно изменить состояние компонента при изменении чего-либо в window, например, при событии "resize". В примере выше, когда ширина окна будет больше 768 пикселей, мы закроем модальное окно/дропдаун, иначе сохраним то же состояние.
+При добавлении `.window` слушатель события установится не на узел DOM, на котором был вызван, а на глобальный объект window. Это используется, когда нужно изменить состояние компонента при изменении чего-либо в window, например, при событии "resize". В примере выше, когда ширина окна будет больше 768 пикселей, модальное окно закроется.
 
 >Замечание: Также можно использовать модификатор `.document` для добавления слушателей к `document`.
 
@@ -355,13 +358,19 @@ Alpine.js можно использовать и для более серьез
 
 **Пример:** `<button x-on:mouseenter.once="fetchSomething()"></button>`
 
-При добавлении `.once` обработчик события будет вызван лишь единожды. Это полезно для вещей, которые вы хотите сделать только один раз, например, загрузка данных и т.п.
+При добавлении `.once` обработчик события будет вызван лишь единожды. Это полезно для вещей, которые нужно сделать только один раз, например, загрузка данных и т.п.
+
+**Модификатор `.passive`**
+
+**Пример:** `<button x-on:mousedown.passive="interactive = true"></button>`
+
+Добавление модификатора `.passive` к слушателю события сделает его пассивным. Это значит, что `preventDefault()` не будет работать ни с какими обрабатываемыми событиями. Это может помочь например с производительностью при прокрутке на сенсорных устройствах.
 
 **Модификатор `.debounce`**
 
 **Пример:** `<input x-on:input.debounce="fetchSomething()">`
 
-Модификатор `debounce` позволяет вам избавиться от ложных повторных вызовов обработчика события. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов к вызову, будет вызван последний вызов.
+Модификатор `debounce` позволяет избавиться от ложных повторных вызовов обработчика события. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов, будет вызван последний вызов.
 
 Время ожидания по умолчанию 250 миллисекунд.
 
@@ -372,6 +381,12 @@ Alpine.js можно использовать и для более серьез
 <input x-on:input.debounce.750ms="fetchSomething()">
 ```
 
+**Модификатор `.camel`**
+
+**Пример:** `<input x-on:event-name.camel="doSomething()">`
+
+Модификатор `camel` позволяет задать событие, которое будет преобразовано к синтаксису "camelCase". В данном примере слушатель будет добавлен к событию `eventName`.
+
 ---
 
 ### `x-model`
@@ -381,13 +396,17 @@ Alpine.js можно использовать и для более серьез
 
 `x-model` добавляет элементу "двустороннюю привязку данных" (two-way data binding). Другими словами, значение поля ввода будет синхронизировано со значением в хранилище данных компонента.
 
-> Замечание: `x-model` достаточно умен, чтобы замечать изменения в текстовых полях ввода, чекбоксах, радио-кнопках, textarea, select, и множественных select. В данных сценариях `x-model` ведет себя аналогично `v-model` [во Vue](https://vuejs.org/v2/guide/forms.html).
+> Замечание: `x-model` достаточно умен, чтобы замечать изменения в текстовых полях ввода, чекбоксах, радио-кнопках, textarea, select, и множественных select. В данных сценариях `x-model` ведет себя аналогично `v-model` [во Vue](https://ru.vuejs.org/v2/guide/forms.html).
 
-**Модификатор `.debounce`**
+**Модификатор `.number`**
+**Пример:** `<input x-model.number="age">`
+
+Модификатор `number` преобразует входное значение в число. Если оно не может быть преобразовано, то возвращается исходное значение.
 
+**Модификатор `.debounce`**
 **Пример:** `<input x-model.debounce="search">`
 
-Модификатор `debounce` позволяет вам избавиться от ложных повторных изменений значения. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов к вызову, будет вызван последний вызов.
+Модификатор `debounce` позволяет избавиться от ложных повторных изменений значения. Другими словами, обработчик НЕ будет вызван, пока не пройдет определенное количество времени с предыдущего вызова. Когда обработчик будет готов, будет вызван последний вызов.
 
 Время ожидания по умолчанию 250 миллисекунд.
 
@@ -429,9 +448,9 @@ Alpine.js можно использовать и для более серьез
 
 `x-ref` предоставляет удобный способ получения DOM-элементов ваших компонентов. При установлении атрибута `x-ref` на элемент, вы делаете его доступным всем обработчикам событий в объекте `$refs`.
 
-Это удобная альтернатива установке id и использованию повсюду `document.querySelector`.
+Это удобная альтернатива установке id и использования `document.querySelector`.
 
-> Замечание: при необходимости вы также можете привязывать x-ref динамические значения: `<span :x-ref="item.id"></span>`.
+> Замечание: при необходимости также можно привязывать x-ref динамические значения: `<span :x-ref="item.id"></span>`.
 
 ---
 
@@ -446,6 +465,8 @@ Alpine не использует Virtual DOM, поэтому важно, что
 
 > Замечание: Внутри тега `<template></template>` с `x-if` должен быть лишь один корневой элемент.
 
+> Замечание: При использовании `template` в тэге `svg`, используйте [полифил](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538). Он должен быть запущен до инициализации Alpine.js.
+
 ---
 
 ### `x-for`
@@ -468,11 +489,26 @@ Alpine не использует Virtual DOM, поэтому важно, что
     <div x-text="index"></div>
 </template>
 ```
+Если нужно получить доступ к массиву данных (collection) внутри цикла, используйте такой синтаксис:
+
+```html
+<template x-for="(item, index, collection) in items" :key="index">
+    <!-- Можно ссылаться на массив "collection" -->
+    <!-- Текущий элемент -->
+    <div x-text="item"></div>
+    <!-- или так -->
+    <div x-text="collection[index]"></div>
+    <!-- Предыдущий элемент -->
+    <div x-text="collection[index - 1]"></div>
+</template>
+```
 
 > Замечание: Внутри тега `<template></template>` с `x-for` должен быть лишь один корневой элемент.
 
+> Замечание: При использовании `template` в тэге `svg`, используйте [полифил](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538). Он должен быть запущен до инициализации Alpine.js.
+
 #### Вложенные `x-for`
-Вы можете вкладывать `x-for` друг в друга, но вы ДОЛЖНЫ оборачивать каждый цикл в какой-нибудь элемент. Например:
+Можно вкладывать `x-for` друг в друга, но НУЖНО оборачивать каждый цикл в какой-нибудь элемент. Например:
 
 ```html
 <template x-for="item in items">
@@ -484,6 +520,16 @@ Alpine не использует Virtual DOM, поэтому важно, что
 </template>
 ```
 
+#### Количество итераций
+
+Alpine поддерживает синтаксис `i in n`, где `n` число, указывающее на количество итераций цикла.
+
+```html
+<template x-for="i in 10">
+    <span x-text="i"></span>
+</template>
+```
+
 ---
 
 ### `x-transition`
@@ -517,7 +563,7 @@ Alpine не использует Virtual DOM, поэтому важно, что
 
 Alpine предлагает 6 разных transition-директив для добавления классов к различным стадиям перехода элемента от состояния "скрытого" к "видимому". Все эти директивы работают как с `x-show`, так и с `x-if`.
 
-Они ведут себя абсолютно так же, как transition-директивы во Vue, не считая того, что у них другие, более понятные названия:
+Они ведут себя абсолютно так же, как transition-директивы во VueJS, но у них более понятные названия:
 
 | Директива | Описание |
 | --- | --- |
@@ -533,10 +579,10 @@ Alpine предлагает 6 разных transition-директив для д
 ### `x-spread`
 **Пример:**
 ```html
-<div x-data="dropdown">
-    <button x-spread="trigger">Открыть дропдаун</button>
+<div x-data="dropdown()">
+    <button x-spread="trigger">Открыть</button>
 
-    <span x-spread="dialogue">Содержимое дропдауна</span>
+    <span x-spread="dialogue">Содержимое</span>
 </div>
 
 <script>
@@ -561,18 +607,20 @@ Alpine предлагает 6 разных transition-директив для д
 </script>
 ```
 
-`x-spread` позволяем вам вынести привязки Alpine из элементов в переиспользуемый объект.
+`x-spread` позволяет вынести привязки Alpine из элементов в объект (он может повторно использоваться в других компонентах).
 
 Ключи объекта – это директивы (любые, в том числе и с модификаторами), а значения – колбэки, с которыми будет работать Alpine.
 
 > Замечание: Единственная особенность при работе с x-spread – это то, как обрабатывается `x-for`. Когда директива, используемая в x-spread – это `x-for`, в колбэке необходимо возвращать выражение в виде строки. К примеру: `['x-for']() { return 'item in items' }`.
 
+> Замечание: Директивы `x-data` и `x-init` не могут использоваться в "spread"-объекте.
+
 ---
 
 ### `x-cloak`
 **Пример:** `<div x-data="{}" x-cloak></div>`
 
-`x-cloak` атрибуты удаляются с элементов, когда Alpine проинициализирован. Это полезно для скрытия DOM до его инициализации. Для этого необходимо добавить следующие глобальные стили:
+Атрибуты `x-cloak` удаляются с элементов, когда Alpine будет проинициализирован. Это полезно для скрытия элемента до построения DOM. Для использования `x-cloak` необходимо добавить следующие css-правила:
 
 ```html
 <style>
@@ -594,13 +642,7 @@ Alpine предлагает 6 разных transition-директив для д
 </div>
 ```
 
-`$el` – магическое свойство, которое используется для получения корневого компонента DOM-узла.
-
-> Замечание: Свойство $event доступно только в DOM-выражениях.
-
-Если вам нужен доступ к $event внутри JS-функции, вы можете передать его напрямую:
-
-`<button x-on:click="myFunction($event)"></button>`
+`$el` – магическое свойство, которое используется для получения корневого DOM-узла компонента.
 
 ### `$refs`
 **Пример:**
@@ -610,7 +652,7 @@ Alpine предлагает 6 разных transition-директив для д
 <button x-on:click="$refs.foo.innerText = 'bar'"></button>
 ```
 
-`$refs` – это магическое свойство, которое используется для получения DOM-элементов внутри компонента, помеченных `x-ref`. Это полезно, когда вам нужно вручную манипулировать элементами DOM.
+`$refs` – это магическое свойство, которое используется для получения DOM-элементов внутри компонента, помеченных `x-ref`. Оно используется, когда нужно вручную манипулировать элементами DOM.
 
 ---
 
@@ -622,33 +664,39 @@ Alpine предлагает 6 разных transition-директив для д
 
 `$event` – это магическое свойство, которое можно использовать в слушателе событий для получения нативного объекта "Event".
 
+> Замечание: свойство $event доступно только в DOM-выражениях.
+
+Если нужно получить доступ к $event внутри функции JavaScript, вы можете передать его как параметр:
+
+`<button x-on:click="myFunction($event)"></button>`
+
 ---
 
 ### `$dispatch`
 **Пример:**
 ```html
 <div @custom-event="console.log($event.detail.foo)">
-    <button @click="$dispatch('custom-event', { foo: 'bar' })">
+    <button @click="$dispatch('custom-event', { foo: 'bar' })"></button>
     <!-- После нажатия кнопки выводит в консоль "bar" -->
 </div>
 ```
 
 **Примечание по распространению событий (event propagation)**
 
-Когда вам нужно перехватить событие, вызванное из узла на том же уровне вложенности, вам нужно использовать модификатор [`.window`](https://github.com/alpinejs/alpine/blob/master/README.ru.md#x-on):
+Когда требуется перехватить событие, вызванное из узла на том же уровне вложенности, можно использовать модификатор [`.window`](https://github.com/alpinejs/alpine/blob/master/README.ru.md#x-on):
 
-**Неправильный пример:**
+**Пример неверного использования:**
 
 ```html
 <div x-data>
     <span @custom-event="console.log($event.detail.foo)"></span>
-    <button @click="$dispatch('custom-event', { foo: 'bar' })">
+    <button @click="$dispatch('custom-event', { foo: 'bar' })"></button>
 <div>
 ```
 
 > Это не будет работать, потому что, когда вызывается `custom-event`, он сразу всплывает ([event bubbling](https://en.wikipedia.org/wiki/Event_bubbling)) к родителю `div`.
 
-**Диспатч для компонентов**
+**Диспетчеризация для компонентов**
 
 Вы также можете использовать предыдущую технику для общения компонентов друг с другом:
 
@@ -657,11 +705,11 @@ Alpine предлагает 6 разных transition-директив для д
 ```html
 <div x-data @custom-event.window="console.log($event.detail)"></div>
 
-<button x-data @click="$dispatch('custom-event', 'Hello World!')">
+<button x-data @click="$dispatch('custom-event', 'Hello World!')"></button>
 <!-- При нажатии в консоль выведется "Hello World!". -->
 ```
 
-`$dispatch` – это сокращение для создания `CustomEvent` и его вызова (диспатча) с помощью `.dispatchEvent()`. Существует множество сценариев использования передачи данных между компонентами с помощью пользовательских событий. [Пройдите по этой ссылке](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events), чтобы узнать больше о системе, лежащей в основе `CustomEvent` в браузерах.
+`$dispatch` – это удобное сокращение для создания `CustomEvent` (пользовательские события) и их вызова с помощью `.dispatchEvent()`. Существует множество сценариев использования передачи данных между компонентами с помощью пользовательских событий. [Пройдите по этой ссылке](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events), чтобы больше узнать о системе, лежащей в основе `CustomEvent` в браузерах.
 
 Любые данные, переданные как второй параметр в `$dispatch('some-event', { some: 'data' })`, становятся доступны через свойство "detail" события: `$event.detail.some`. Добавление событию пользовательских данных через свойство `.detail` – стандартная практика для `CustomEvent` в браузерах. [Подробнее здесь](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
 
@@ -670,15 +718,15 @@ Alpine предлагает 6 разных transition-директив для д
 ```html
 <div x-data="{ foo: 'bar' }">
     <span x-model="foo">
-        <button @click="$dispatch('input', 'baz')">
-        <!-- После нажатия кнопки, `x-model` перехватит всплывающее события "input", и обновит foo на "baz". -->
+        <button @click="$dispatch('input', 'baz')"></button>
+        <!-- После нажатия кнопки, `x-model` перехватит всплывающее событие "input" (oninput), и обновит foo на "baz". -->
     </span>
 </div>
 ```
 
 > Замечание: Свойство $dispatch доступно только в DOM-выражениях.
 
-Если вам нужен доступ к $dispatch внутри JS-функции, вы можете передать его напрямую:
+Если нужен доступ к $dispatch внутри JavaScript-функции, вы можете передать его напрямую:
 
 `<button x-on:click="myFunction($dispatch)"></button>`
 
@@ -734,6 +782,6 @@ Alpine полагается на собственную реализацию, к
 
 ## Лицензия
 
-Copyright © 2019-2020 Caleb Porzio and контрибьюторы
+Copyright © 2019-2021 Caleb Porzio и другие
 
 Лицензировано по лицензии MIT, смотрите [LICENSE.md](LICENSE.md) для подробностей.