Use Functions Inside Constructos

RULES:

• wrap event handlers with W.fx(handler, ...args)
• no default DOM event object
• pass "this" to receive the triggering element
• args order = handler params order
• use ids (strings) instead of DOM refs
• for forms, return false to prevent submit
• when use fx, the type must be string not Function

BASIC:

<winnetou>
  <button id="[[btn]]"
</winnetou>

import { W } from "winnetoujs";
import { $btn } from "./btn.wcto";

new $btn({
  onClick: W.fx(() => console.log("clicked")),
}).create("#app");

USE "this":

new $btn({
  onClick: W.fx((self) => {
    self.disabled = true;
  }, "this"),
}).create("#app");

PASS ARGS:

new $btn({
  onClick: W.fx(
    (self, targetId, msg) => {
      document.getElementById(targetId).textContent = msg;
    },
    "this",
    "result",
    "OK",
  ),
}).create("#app");

COMMON EVENTS:

• click: onclick
• change: onchange
• input: oninput
• submit: onsubmit

FORM SUBMIT:

new $loginForm({
  onSubmit: W.fx((form) => {
    // handle submit
    return false;
  }, "this"),
}).create("#app");

WITH MUTABLES:

W.setMutable("count", "0");
new $btn({
  onClick: W.fx(() => {
    const n = parseInt(W.getMutable("count"));
    W.setMutable("count", (n + 1).toString());
  }),
}).create("#app");

TROUBLESHOOT:

• event not firing: prop name must match HTML attribute (e.g. onclick)
• wrong element: ensure "this" is first arg after handler
• need ids: store constructo instance and use instance.ids

PERF:

• avoid creating new handlers inside loops; pass data as args
• avoid to use addEventListener directly; use WinnetouFx instead

Converted and distributed by TomeVault — claim your Tome and manage your conversions.