Merge pull request #4 from stimulus-components/feature/using-target-only

Using target to bind event listener

Author: guillaumebriday

CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- **Breaking** `data-target="checkbox-select-all.checkboxAll"` is now required.
+- **Breaking** `data-action="change->checkbox-select-all#toggle"` has been be removed.
+```diff
+- <input type="checkbox" data-action="change->checkbox-select-all#toggle" />
++ <input type="checkbox" data-target="checkbox-select-all.checkboxAll" />
+```
+
 ## [1.1.0] - 2020-10-29
 
 ### Added

README.md

@@ -35,7 +35,7 @@ application.register("checkbox-select-all", CheckboxSelectAll)
   <tbody>
     <td class="block">
       <label>
-        <input type="checkbox" data-target="checkbox-select-all.checkboxAll" data-action="change->checkbox-select-all#toggle" />
+        <input type="checkbox" data-target="checkbox-select-all.checkboxAll" />
         <span>Select All / Deselect All</span>
       </label>
     </td>
@@ -104,7 +104,7 @@ In your view:
 ```html
 <%= form_with model: @user, data: { controller: 'checkbox-select-all' } do |f| %>
   <label>
-    <input type="checkbox" data-target="checkbox-select-all.checkboxAll" data-action="change->checkbox-select-all#toggle" />
+    <input type="checkbox" data-target="checkbox-select-all.checkboxAll" />
     <span>Select All / Deselect All</span>
   </label>
 

index.html

@@ -98,12 +98,7 @@ <h2 class="text-center text-2xl font-bold my-4">Essential links</h2>
             <tbody>
               <td class="block">
                 <label>
-                  <input
-                    id="checkbox-select-all"
-                    type="checkbox"
-                    data-target="checkbox-select-all.checkboxAll"
-                    data-action="change->checkbox-select-all#toggle"
-                  />
+                  <input id="checkbox-select-all" type="checkbox" data-target="checkbox-select-all.checkboxAll" />
                   <span>Select All / Deselect All</span>
                 </label>
               </td>

src/index.js

@@ -3,18 +3,23 @@ import { Controller } from 'stimulus'
 export default class extends Controller {
   static targets = ['checkboxAll', 'checkbox']
 
-  connect () {
+  initialize () {
+    this.toggle = this.toggle.bind(this)
     this.refresh = this.refresh.bind(this)
+  }
 
+  connect () {
     if (!this.hasCheckboxAllTarget) return
 
+    this.checkboxAllTarget.addEventListener('change', this.toggle)
     this.checkboxTargets.forEach(checkbox => checkbox.addEventListener('change', this.refresh))
     this.refresh()
   }
 
   disconnect () {
     if (!this.hasCheckboxAllTarget) return
 
+    this.checkboxAllTarget.removeEventListener('change', this.toggle)
     this.checkboxTargets.forEach(checkbox => checkbox.removeEventListener('change', this.refresh))
   }