|
1 | 1 | ### Inputs |
2 | | -Input elements can be two-way data binded to a model, which represents a property of the component. |
| 2 | +Input elements can be two-way data bound to a model, which represents a property of the component. |
3 | 3 |
|
4 | 4 | ```html |
5 | 5 | <input type="text" r-model="name" (r-lazy) (r-debounce="500")> |
| 6 | + |
6 | 7 | Hello, {{ $this->name }}! |
7 | 8 | ``` |
8 | 9 |
|
9 | 10 | > **Note:** Attributes between parentheses are optional. |
10 | 11 |
|
11 | | -- `r-model` - binds the input directly to a component property. |
| 12 | +- `r-model` - component property name to bind to the input. |
12 | 13 | - `r-lazy` - (optional) update model value only when an action is performed, instead of real-time. |
13 | | -- `r-debounce` - (optional) update model value after a timeout in miliseconds, instead real-time. |
| 14 | +- `r-debounce` - (optional) update model value after a timeout in miliseconds, instead of real-time. |
| 15 | + |
| 16 | +**Supported input types:** `text`, `checkbox`, `radio`, `date`, `datetime-local`, `email`, `number`, `month`, `password`, `range`, `search`, `tel`, `time`, `url`, `color`, `week` and `textarea`. |
14 | 17 |
|
15 | 18 | ### Checkboxes and radios |
16 | | -Checkboxes and radio buttons can have a custom value (other than a boolean) binded to their models when checked. |
| 19 | +Checkboxes and radio buttons can have a custom value (rather than a boolean) bound to their models when checked. |
17 | 20 |
|
18 | 21 | ```html |
19 | | -<input type="checkbox" r-model="accept" (r-value="Yes")> |
| 22 | +<input type="checkbox" r-model="accept" (value="Yes")> |
20 | 23 | ``` |
21 | 24 |
|
22 | 25 | ```html |
23 | | -<input type="radio" r-model="rating" (r-value="1")> |
24 | | -<input type="radio" r-model="rating" (r-value="2")> |
25 | | -<input type="radio" r-model="rating" (r-value="3")> |
| 26 | +<input type="radio" r-model="rating" (value="1")> |
| 27 | +<input type="radio" r-model="rating" (value="2")> |
| 28 | +<input type="radio" r-model="rating" (value="3")> |
26 | 29 | ``` |
27 | 30 |
|
28 | 31 | > **Note:** Attributes between parentheses are optional. |
29 | 32 |
|
30 | 33 | #### Multiple choices |
31 | | -Multiple choices checkboxes should be binded to an array model. The component property will be filled with the selected checkboxes custom values. |
| 34 | +Multiple choices checkboxes should be bound to an array model. The component property will be filled with the selected checkboxes custom values. |
| 35 | + |
| 36 | +```html |
| 37 | +<input type="checkbox" r-model="services[]" value="Service 1"> |
| 38 | +<input type="checkbox" r-model="services[]" value="Service 2"> |
| 39 | +<input type="checkbox" r-model="services[]" value="Service 3"> |
| 40 | +``` |
| 41 | + |
| 42 | +### Selects |
| 43 | +Select options can have a custom value bounded to their models. |
32 | 44 |
|
33 | 45 | ```html |
34 | | -<input type="checkbox" r-model="services[]" r-value="Service 1"> |
35 | | -<input type="checkbox" r-model="services[]" r-value="Service 2"> |
36 | | -<input type="checkbox" r-model="services[]" r-value="Service 3"> |
| 46 | +<select r-model="age"> |
| 47 | + <option (value="18")>18 years old</option> |
| 48 | + <option (value="30")>30 years old</option> |
| 49 | + <option (value="60")>60 years old</option> |
| 50 | +</select> |
37 | 51 | ``` |
38 | 52 |
|
| 53 | +> **Note:** Attributes between parentheses are optional. |
| 54 | +
|
| 55 | +#### Multiple choices |
| 56 | +Multiple choices selects should be bound to an array model. The component property will be filled with the selected options (or their custom values, if any). |
| 57 | + |
| 58 | +```html |
| 59 | +<select r-model="vehicles[]" multiple> |
| 60 | + <option (value="B")>Bike</option> |
| 61 | + <option (value="C")>Car</option> |
| 62 | + <option (value="A")>Airplane</option> |
| 63 | +</select> |
| 64 | +``` |
| 65 | + |
| 66 | +> **Note:** Attributes between parentheses are optional. |
| 67 | +
|
39 | 68 | ### Actions |
40 | | -Some events in elements can be binded to call a method in the component controller. |
| 69 | +Some events in elements can be bound to call a method from the component controller. |
41 | 70 |
|
42 | 71 | ```html |
43 | 72 | <button r-click="load()" (r-prevent)>Click me!</button> |
44 | 73 | ``` |
45 | 74 |
|
46 | 75 | > **Note:** Attributes between parentheses are optional. |
47 | 76 |
|
48 | | -- `r-click` - full method signature to call from the component controller. You can also use parameters in the function. |
| 77 | +- `r-click` - full method signature to call from the component controller. You can also pass parameters in the function. |
49 | 78 | - `r-prevent` - (optional) prevent default browser action of the event. |
50 | 79 |
|
51 | 80 | #### Supported actions |
52 | 81 | Current supported actions are: |
53 | 82 |
|
54 | | -- `r-click` - button click |
55 | | -- `r-submit` - form submit |
56 | | -- `r-enter` - enter key pressed |
57 | | -- `r-tab` - tab key pressed |
| 83 | +- `r-click` - triggered on element click. |
| 84 | +- `r-submit` - triggered on `<form>` element submit. |
| 85 | +- `r-focus` - triggered when an element gains focus. |
| 86 | +- `r-blur` - triggered when an element loses focus. |
| 87 | +- `r-hover` - triggered when the mouse hovers an element. |
| 88 | +- `r-leave` - triggered when the mouse leaves an element. |
| 89 | +- `r-enter` - triggered when the **Enter** key is pressed in an input element. |
| 90 | +- `r-tab` - triggered when the **Tab** key is pressed in an input element. |
58 | 91 |
|
59 | 92 | #### Magic methods |
60 | 93 | Some predefined methods are: |
61 | 94 |
|
62 | | -- `$refresh()` - refreshes the component, without performing any action. |
| 95 | +- `$refresh()` - refreshes the component render, without performing any action. |
63 | 96 | - `$set('property_name', 'value')` - sets a property value in the component. |
64 | 97 |
|
65 | 98 | ### Repeats |
|
0 commit comments