Comment on page
🦄

Custom Functions

Overview

Custom functions are written like any normal JavaScript function. A components reactive store can be accessed via the API or Magic Refs. We recommend the use of custom functions wherever possible to minimise complex logic creeping into attributes.

Example

<span x-text="first_name + ' ' + last_name"></span>
Whilst this is convenient, it becomes significantly more challenging to maintain.
<span x-text="fullName($store)"></span>
In this example, we utilise the magic references available in attribute expressions.
function fullName(store) {
return store.first_name + ' ' + store.last_name;
// or return `${store.first_name} ${store.last_name}`;
}

Magic Refs

Name
Description
Optional
$store
Reference to the components reactive store
$el
Reference to the DOM element bound to the directive
$event
Reference to the Event emitted from the user action

Example

Here's the submitForm() function used in the x-on:submit example.
<form x-on:submit="submitForm($store, $event)">
<input x-model="fields.first_name">
<input x-model="fields.last_name">
</form>
function submitForm(store, evt) {
evt.preventDefault();
// reset the state
store.displaySuccess = false;
store.displayError = false;
// log the fields data
console.log(store.fields);
//update the state to display the success message
store.displaySuccess = true;
}