Two small vocabularies do a lot of work: effects decide what happens after an action, formats decide how a bound value renders.
Effects
An effect chain runs after an action resolves. data-on-success runs on success, data-on-error on failure.
Chains are pipe-separated and run left to right:
data-on-success="notify:Saved | close-dialog | refresh"Each entry is verb or verb:argument.
| Effect | Syntax | What it does |
|---|---|---|
navigate | navigate:<url> | Go to a URL |
notify | notify:<message> | Show an info toast |
notify-error | notify-error:<message> | Show an error toast |
close-dialog | close-dialog | Close the nearest open dialog or drawer |
open-dialog | open-dialog:#dialogId | Open a dialog by selector |
reload | reload | Hard reload the page |
refresh | refresh or refresh:#id | Re-run every data-source on the page, or just one |
set-state | set-state:path=value | Write into appmint.state |
reset-form | reset-form | Reset the form the action came from |
focus | focus:#sel | Focus an element |
refresh is usually what you want after a write — it re-runs the sources so lists reflect the change without a page reload.
Worked example
<form data-action="ticket.create"
data-payload="form"
data-on-success="notify:Ticket opened | reset-form | refresh:#my-tickets"
data-on-error="notify-error:Could not open ticket">
<input name="subject" required>
<textarea name="body"></textarea>
<button type="submit">Open ticket</button>
</form>Submitting serializes the form, creates the ticket, toasts, clears the form, and refreshes only the ticket list.
Formats
data-format renders a bound value for display. The underlying value is untouched.
| Format | Renders as |
|---|---|
currency | Currency — takes a currency option, ISO code, default USD |
number | Locale-formatted number |
percent | Percentage |
date | Locale date |
datetime | Locale date and time |
parentheses | Wraps positive numbers in parentheses |
uppercase | UPPERCASE |
lowercase | lowercase |
capitalize | Capitalized |
Format options
Options are passed as separate attributes, named data-format-opt-<option>:
<span data-bind="data.price"
data-format="currency"
data-format-opt-currency="EUR"></span>Only currency takes an option today — the ISO currency code.