Update stimulus-reflex.md
This commit is contained in:
parent
5a23b79e78
commit
3cbc5b1bcd
|
@ -9,8 +9,9 @@ updated: 2021-01-07
|
||||||
|
|
||||||
Trigger reflexes without writing any javascript with the `data-reflex` attribute.
|
Trigger reflexes without writing any javascript with the `data-reflex` attribute.
|
||||||
|
|
||||||
```erb
|
#### index.html.erb
|
||||||
<!-- index.html.erb -->
|
|
||||||
|
```html
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
data-reflex="click->CounterReflex#increment"
|
data-reflex="click->CounterReflex#increment"
|
||||||
|
@ -20,8 +21,9 @@ Trigger reflexes without writing any javascript with the `data-reflex` attribute
|
||||||
>
|
>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### counter_reflex.rb
|
||||||
|
|
||||||
```ruby
|
```ruby
|
||||||
# counter_reflex.rb
|
|
||||||
class CounterReflex < StimulusReflex::Reflex
|
class CounterReflex < StimulusReflex::Reflex
|
||||||
def increment
|
def increment
|
||||||
@count = element.dataset[:count].to_i + element.dataset[:step].to_i
|
@count = element.dataset[:count].to_i + element.dataset[:step].to_i
|
||||||
|
@ -33,16 +35,18 @@ end
|
||||||
|
|
||||||
Stimulus.js controllers registered with StimulusReflex can use the `stimulate` method to trigger reflexes
|
Stimulus.js controllers registered with StimulusReflex can use the `stimulate` method to trigger reflexes
|
||||||
|
|
||||||
```erb
|
#### index.html.erb
|
||||||
<!-- index.html.erb -->
|
|
||||||
|
```html
|
||||||
<a href="#"
|
<a href="#"
|
||||||
data-controller="counter"
|
data-controller="counter"
|
||||||
data-action="click->counter#increment"
|
data-action="click->counter#increment"
|
||||||
>Increment <%= @count %></a>
|
>Increment <%= @count %></a>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### counter_controller.js
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// counter_controller.js
|
|
||||||
import { Controller } from 'stimulus'
|
import { Controller } from 'stimulus'
|
||||||
import StimulusReflex from 'stimulus_reflex'
|
import StimulusReflex from 'stimulus_reflex'
|
||||||
|
|
||||||
|
@ -58,8 +62,9 @@ export default class extends Controller {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### counter_reflex.rb
|
||||||
|
|
||||||
```ruby
|
```ruby
|
||||||
# counter_reflex.rb
|
|
||||||
class CounterReflex < StimulusReflex::Reflex
|
class CounterReflex < StimulusReflex::Reflex
|
||||||
def increment(step = 1)
|
def increment(step = 1)
|
||||||
session[:count] = session[:count].to_i + step
|
session[:count] = session[:count].to_i + step
|
||||||
|
@ -73,14 +78,14 @@ end
|
||||||
|
|
||||||
Instead of refreshing the entire page, you can specify a portion of the page to update with `morph(selector, content)`
|
Instead of refreshing the entire page, you can specify a portion of the page to update with `morph(selector, content)`
|
||||||
|
|
||||||
```erb
|
```html
|
||||||
<!-- show.html.erb -->
|
<!-- show.html.erb -->
|
||||||
<header data-reflex="click->Example#change">
|
<header data-reflex="click->Example#change">
|
||||||
<%= render partial: "path/to/foo", locals: {message: "Am I the medium or the massage?"} %>
|
<%= render partial: "path/to/foo", locals: {message: "Am I the medium or the massage?"} %>
|
||||||
</header>
|
</header>
|
||||||
```
|
```
|
||||||
|
|
||||||
```erb
|
```html
|
||||||
<!-- _foo.html.erb -->
|
<!-- _foo.html.erb -->
|
||||||
<div id="foo">
|
<div id="foo">
|
||||||
<span class="spa"><%= message %></span>
|
<span class="spa"><%= message %></span>
|
||||||
|
@ -179,7 +184,7 @@ this.stimulate('Comments#create')
|
||||||
|
|
||||||
You can use the `data-reflex-dataset="combined"` directive to scoop all data attributes up the DOM hierarchy and pass them as part of the Reflex payload.
|
You can use the `data-reflex-dataset="combined"` directive to scoop all data attributes up the DOM hierarchy and pass them as part of the Reflex payload.
|
||||||
|
|
||||||
```erb
|
```html
|
||||||
<!-- new.html.erb -->
|
<!-- new.html.erb -->
|
||||||
<div data-post-id="<%= @post.id %>">
|
<div data-post-id="<%= @post.id %>">
|
||||||
<div data-category-id="<%= @category.id %>">
|
<div data-category-id="<%= @category.id %>">
|
||||||
|
@ -188,7 +193,7 @@ You can use the `data-reflex-dataset="combined"` directive to scoop all data att
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
```ruby
|
```html
|
||||||
# comment_reflex.rb
|
# comment_reflex.rb
|
||||||
class CommentReflex < ApplicationReflex
|
class CommentReflex < ApplicationReflex
|
||||||
def create
|
def create
|
||||||
|
|
Loading…
Reference in New Issue