🦄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

❌ Not Recommended

<span x-text="first_name + ' ' + last_name"></span>

Whilst this is convenient, it becomes significantly more challenging to maintain.

✅ Recommended

<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;
}