trouni · November 20, 2023 13:14 · Nov 20, 2023 · Aug 15, 2023 · Aug 15, 2023 · Aug 10, 2023
diff --git a/stimulusjs_cheatsheet.md b/stimulusjs_cheatsheet.md
@@ -45,14 +45,16 @@ export default class extends Controller {
 }
 ```
 
-2. In your HTML view, use the `data-action` attribute to associate the action with an event. The syntax is `data-action="<name-of-your-controller>#<nameOfTheAction>"`:
+2. In your HTML view, use the `data-action` attribute to associate the action with an event. The syntax is `data-action="<event>-><name-of-your-controller>#<nameOfTheAction>"`:
 
 ```html
 <div data-controller="my-feature">
-  <button data-action="my-feature#doSomething">Click me</button>
+  <button data-action="event->my-feature#doSomething">Click me</button>
 </div>
 ```
 
+Here is the [list of all the JavaScript events](https://developer.mozilla.org/en-US/docs/Web/Events#event_listing) you can use.
+
 ## Select Elements using `data-target`
 
 1. In your controller, use the `targets` property to define named references to HTML elements. You can then access those elements using `this.<targetName>Target`:
@@ -73,12 +75,11 @@ export default class extends Controller {
 }
 ```
 
-2. In your HTML view, use the `data-target` attribute to indicate where the element should be referenced. The syntax is `data-target="<name-of-your-controller>.<target-name>`:
+2. In your HTML view, use the `data-target` attribute to indicate where the element should be referenced. The syntax is `data-<name-of-your-controller>-target="<target-name>`:
 
 ```html
 <div data-controller="my-feature">
-  <button data-action="my-feature#doSomething">Click me</button>
-  <p data-target="my-feature.output"></p>
+  <p data-my-feature-target="output"></p>
 </div>
 ```
 

diff --git a/stimulusjs_cheatsheet.md b/stimulusjs_cheatsheet.md
@@ -104,7 +104,7 @@ export default class extends Controller {
 2. In your HTML view, use the `data-value` attribute to set the dynamic value on the same element your controller is connected to. The syntax is `data-<name-of-your-controller>-<name-of-the-value>-value="The value you want inside"`:
 
 ```html
-<div data-controller="my-feature" data-my-feature-value="Hello from data-value!">
+<div data-controller="my-feature" data-my-feature-greeting-value="Hello from data-value!">
   <!-- Content here -->
 </div>
 ```
diff --git a/stimulusjs_cheatsheet.md b/stimulusjs_cheatsheet.md
@@ -104,7 +104,7 @@ export default class extends Controller {
 2. In your HTML view, use the `data-value` attribute to set the dynamic value on the same element your controller is connected to. The syntax is `data-<name-of-your-controller>-<name-of-the-value>-value="The value you want inside"`:
 
 ```html
-<div data-controller="my-feature" data-my-feature-greeting-value="Hello from data-value!">
+<div data-controller="my-feature" data-my-feature-value="Hello from data-value!">
   <!-- Content here -->
 </div>
 ```
diff --git a/stimulusjs_cheatsheet.md b/stimulusjs_cheatsheet.md
@@ -6,14 +6,15 @@
   - with `rails g stimulus my_feature`, or
   - by manually adding a file in the `controllers` directory of your Rails application, e.g., `app/javascript/controllers/my_feature_controller.js`.
 
-2. The controller file should define your Stimulus controller class. The `connect` action gets run as soon as an element connected to your controller is initialized:
+2. The controller file should define your Stimulus controller class:
 
 ```javascript
 // app/javascript/controllers/my_feature_controller.js
 import { Controller } from "stimulus";
 
 export default class extends Controller {
   connect() {
+    // The connect action gets run as soon as an element connected to your controller is initialized
     console.log("MyFeatureController connected!");
   }
 }
@@ -33,12 +34,10 @@ export default class extends Controller {
 
 ```javascript
 // app/javascript/controllers/my_feature_controller.js
-import { Controller } from "stimulus";
+// ...
 
 export default class extends Controller {
-  connect() {
-    console.log("MyFeatureController connected!");
-  }
+  // ...
 
   doSomething() {
     console.log("Button clicked!");
@@ -56,21 +55,19 @@ export default class extends Controller {
 
 ## Select Elements using `data-target`
 
-1. In your controller, use the `targets` property to define named references to HTML elements. You can then access those element using `this.<targetName>Target`:
+1. In your controller, use the `targets` property to define named references to HTML elements. You can then access those elements using `this.<targetName>Target`:
 
 ```javascript
 // app/javascript/controllers/my_feature_controller.js
-import { Controller } from "stimulus";
+// ...
 
 export default class extends Controller {
   static targets = ["output"];
 
-  connect() {
-    console.log("MyFeatureController connected!");
-  }
+  // ...
 
   doSomething() {
-    console.log("Button clicked!");
+    console.log(this.outputTarget);
     this.outputTarget.innerText = "Hello, Stimulus!";
   }
 }
@@ -91,14 +88,12 @@ export default class extends Controller {
 
 ```javascript
 // app/javascript/controllers/my_feature_controller.js
-import { Controller } from "stimulus";
+// ...
 
 export default class extends Controller {
   static values = { greeting: String };
 
-  connect() {
-    console.log("MyFeatureController connected!");
-  }
+  // ...
 
   initialize() {
     console.log("Initialized with greeting:", this.greetingValue);

diff --git a/stimulusjs_cheatsheet.md b/stimulusjs_cheatsheet.md
@@ -6,7 +6,7 @@
   - with `rails g stimulus my_feature`, or
   - by manually adding a file in the `controllers` directory of your Rails application, e.g., `app/javascript/controllers/my_feature_controller.js`.
 
-2. The controller file should define your Stimulus controller class:
+2. The controller file should define your Stimulus controller class. The `connect` action gets run as soon as an element connected to your controller is initialized:
 
 ```javascript
 // app/javascript/controllers/my_feature_controller.js

diff --git a/stimulusjs_cheatsheet.md b/stimulusjs_cheatsheet.md
@@ -1,6 +1,6 @@
-### Cheat Sheet: Using Stimulus.js in Rails
+# Cheat Sheet: Using Stimulus.js in Rails
 
-#### Create and Connect a Stimulus Controller
+## Create and Connect a Stimulus Controller
 
 1. Create a new Stimulus controller file, either:
   - with `rails g stimulus my_feature`, or
@@ -27,7 +27,7 @@ export default class extends Controller {
 </div>
 ```
 
-#### Add Interactivity using `data-action`
+## Add Interactivity using `data-action`
 
 1. In your controller, define a new method that will be triggered by an event (e.g. `doSomething`):
 
@@ -54,7 +54,7 @@ export default class extends Controller {
 </div>
 ```
 
-#### Select Elements using `data-target`
+## Select Elements using `data-target`
 
 1. In your controller, use the `targets` property to define named references to HTML elements. You can then access those element using `this.<targetName>Target`:
 
@@ -85,7 +85,7 @@ export default class extends Controller {
 </div>
 ```
 
-#### Add Dynamic Values using `data-value`
+## Add Dynamic Values using `data-value`
 
 1. In your controller, use the `values` property to define named references to dynamic values, and specify their datatype. They become accessible in your controller using `this.<valueName>Value`:
 

diff --git a/stimulusjs_cheatsheet.md b/stimulusjs_cheatsheet.md
@@ -0,0 +1,115 @@
+### Cheat Sheet: Using Stimulus.js in Rails
+
+#### Create and Connect a Stimulus Controller
+
+1. Create a new Stimulus controller file, either:
+  - with `rails g stimulus my_feature`, or
+  - by manually adding a file in the `controllers` directory of your Rails application, e.g., `app/javascript/controllers/my_feature_controller.js`.
+
+2. The controller file should define your Stimulus controller class:
+
+```javascript
+// app/javascript/controllers/my_feature_controller.js
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  connect() {
+    console.log("MyFeatureController connected!");
+  }
+}
+```
+
+3. In your HTML view, use the `data-controller` attribute to connect the controller to an element. The syntax is `data-controller=<name-of-your-controller>`:
+
+```html
+<div data-controller="my-feature">
+  <!-- Your content here -->
+</div>
+```
+
+#### Add Interactivity using `data-action`
+
+1. In your controller, define a new method that will be triggered by an event (e.g. `doSomething`):
+
+```javascript
+// app/javascript/controllers/my_feature_controller.js
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  connect() {
+    console.log("MyFeatureController connected!");
+  }
+
+  doSomething() {
+    console.log("Button clicked!");
+  }
+}
+```
+
+2. In your HTML view, use the `data-action` attribute to associate the action with an event. The syntax is `data-action="<name-of-your-controller>#<nameOfTheAction>"`:
+
+```html
+<div data-controller="my-feature">
+  <button data-action="my-feature#doSomething">Click me</button>
+</div>
+```
+
+#### Select Elements using `data-target`
+
+1. In your controller, use the `targets` property to define named references to HTML elements. You can then access those element using `this.<targetName>Target`:
+
+```javascript
+// app/javascript/controllers/my_feature_controller.js
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["output"];
+
+  connect() {
+    console.log("MyFeatureController connected!");
+  }
+
+  doSomething() {
+    console.log("Button clicked!");
+    this.outputTarget.innerText = "Hello, Stimulus!";
+  }
+}
+```
+
+2. In your HTML view, use the `data-target` attribute to indicate where the element should be referenced. The syntax is `data-target="<name-of-your-controller>.<target-name>`:
+
+```html
+<div data-controller="my-feature">
+  <button data-action="my-feature#doSomething">Click me</button>
+  <p data-target="my-feature.output"></p>
+</div>
+```
+
+#### Add Dynamic Values using `data-value`
+
+1. In your controller, use the `values` property to define named references to dynamic values, and specify their datatype. They become accessible in your controller using `this.<valueName>Value`:
+
+```javascript
+// app/javascript/controllers/my_feature_controller.js
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static values = { greeting: String };
+
+  connect() {
+    console.log("MyFeatureController connected!");
+  }
+
+  initialize() {
+    console.log("Initialized with greeting:", this.greetingValue);
+  }
+}
+```
+
+2. In your HTML view, use the `data-value` attribute to set the dynamic value on the same element your controller is connected to. The syntax is `data-<name-of-your-controller>-<name-of-the-value>-value="The value you want inside"`:
+
+```html
+<div data-controller="my-feature" data-my-feature-greeting-value="Hello from data-value!">
+  <!-- Content here -->
+</div>
+```
No results found