Skip to content

Commit

Permalink
fix a few missed invoketarget/invokeaction renames (#1070)
Browse files Browse the repository at this point in the history
  • Loading branch information
keithamus authored Jul 10, 2024
1 parent 3a0fdb9 commit 8c2aa94
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions site/src/pages/components/invokers.explainer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ command allows for custom JavaScript to be triggered without having to wire up
manual event handlers to the Invokers.

```html
<!-- Custom invokeactions must contain a dash! -->
<!-- Custom commands must contain a dash! -->
<button commandfor="my-custom" command="my-frobulate">Frobulate</button>

<div id="my-custom"></div>
Expand Down Expand Up @@ -452,16 +452,16 @@ the two will co-exist side by side for some while to enable a smooth transition.
It is, however, intended that `commandfor` will replace `popovertarget` leading
to `popovertarget`'s eventual deprecation.

#### InvokeTarget seems limited, what if I wanted to add arguments?
#### Command seems limited, what if I wanted to add arguments?

Custom `command`s can be used in a freeform way, for your own elements. If
you feel it necessary you can invent your own DSLs for passing extra data using
this hint. For example:

```html
<button invoketarget="my-counter" invokeaction="add-1">Add 1</button>
<button invoketarget="my-counter" invokeaction="add-2">Add 2</button>
<button invoketarget="my-counter" invokeaction="add-10">Add 10</button>
<button commandfor="my-counter" command="add-1">Add 1</button>
<button commandfor="my-counter" command="add-2">Add 2</button>
<button commandfor="my-counter" command="add-10">Add 10</button>

<input readonly id="my-counter" value="0" />

Expand All @@ -480,9 +480,9 @@ You can also leverage the buttons `value` attribute to effectively parameterise
certain commands:

```html
<button invoketarget="my-counter" invokeaction="add-num" value="1">Add 1</button>
<button invoketarget="my-counter" invokeaction="add-num" value="2">Add 2</button>
<button invoketarget="my-counter" invokeaction="add-num" value="10">Add 10</button>
<button commandfor="my-counter" command="add-num" value="1">Add 1</button>
<button commandfor="my-counter" command="add-num" value="2">Add 2</button>
<button commandfor="my-counter" command="add-num" value="10">Add 10</button>

<input readonly id="my-counter" value="0" />

Expand Down

0 comments on commit 8c2aa94

Please sign in to comment.