updated: improve event handling

Author: GianlucaGuarini

frameworks/keyed/riot/package.json

@@ -10,12 +10,12 @@
     "build-prod": "webpack -p"
   },
   "devDependencies": {
-    "@riotjs/compiler": "4.7.0",
+    "@riotjs/compiler": "4.8.2",
     "@riotjs/webpack-loader": "4.0.3",
-    "webpack": "4.42.0",
+    "webpack": "4.42.1",
     "webpack-cli": "3.3.11"
   },
   "dependencies": {
-    "riot": "4.11.0"
+    "riot": "4.12.0"
   }
 }

frameworks/keyed/riot/src/app.riot

@@ -39,15 +39,15 @@
         </div>
       </div>
     </div>
-    <table class='table table-hover table-striped test-data' onclick={handleClick}>
+    <table class='table table-hover table-striped test-data'>
       <tbody>
         <tr each={ row in state.rows } key={ row.id } class={ rowClass(row) }>
           <td class='col-md-1'>{ row.id }</td>
           <td class='col-md-4'>
-            <a data-action="select" data-id={row.id}>{ row.label }</a>
+            <a onclick={() => select(row.id)}>{ row.label }</a>
           </td>
           <td class='col-md-1'>
-            <a><span data-action="remove" data-id={row.id} class='glyphicon glyphicon-remove' aria-hidden='true'></span></a>
+            <a><span onclick={() => remove(row.id)} class='glyphicon glyphicon-remove' aria-hidden='true'></span></a>
           </td>
           <td class='col-md-6'></td>
         </tr>
@@ -64,13 +64,6 @@
           selected: this.store.selected
         }
       },
-      handleClick(event) {
-        const { action, id } = event.target.dataset
-
-        if (action && id) {
-          this[action](Number(id))
-        }
-      },
       rowClass(row) {
         return row.id === this.state.selected ? 'danger' : ''
       },

frameworks/non-keyed/riot/package.json

@@ -10,12 +10,12 @@
     "build-prod": "webpack -p"
   },
   "devDependencies": {
-    "@riotjs/compiler": "4.7.0",
+    "@riotjs/compiler": "4.8.2",
     "@riotjs/webpack-loader": "4.0.3",
-    "webpack": "4.42.0",
+    "webpack": "4.42.1",
     "webpack-cli": "3.3.11"
   },
   "dependencies": {
-    "riot": "4.11.0"
+    "riot": "4.12.0"
   }
 }

frameworks/non-keyed/riot/src/app.riot

@@ -39,15 +39,15 @@
         </div>
       </div>
     </div>
-    <table class='table table-hover table-striped test-data' onclick={handleClick}>
+    <table class='table table-hover table-striped test-data'>
       <tbody>
         <tr each={ row in state.rows } class={ rowClass(row) }>
           <td class='col-md-1'>{ row.id }</td>
           <td class='col-md-4'>
-            <a data-action="select" data-id={row.id}>{ row.label }</a>
+            <a onclick={() => select(row.id)}>{ row.label }</a>
           </td>
           <td class='col-md-1'>
-            <a><span data-action="remove" data-id={row.id} class='glyphicon glyphicon-remove' aria-hidden='true'></span></a>
+            <a><span onclick={() => remove(row.id)} class='glyphicon glyphicon-remove' aria-hidden='true'></span></a>
           </td>
           <td class='col-md-6'></td>
         </tr>
@@ -64,13 +64,6 @@
           selected: this.store.selected
         }
       },
-      handleClick(event) {
-        const { action, id } = event.target.dataset
-
-        if (action && id) {
-          this[action](Number(id))
-        }
-      },
       rowClass(row) {
         return row.id === this.state.selected ? 'danger' : ''
       },