Models | Lucid.js

Lucid.js / Models

Introduction 🔗

With reactive frameworks such as Lucid and Vue, models refers to data bindings between form fields and component data. These bindings are two-way, so when the value of a field, or its data counterpart, are changed, the other is changed too.

Syntax 🔗

Models are denoted via the special data-lmodel attribute on form fields within components. The value should be a property within the component's data object that it should sync (bind) to.

<div>
    <input type=text data-lmodel=foo>
</div>

Example 🔗

In the following example, we create a binding between the text input and the component's name data property. When one changes, so does the other. We print out the live result in a paragraph below the field.

<div>
    <input type=text data-lmodel=name>
    <p>Name is: {{name}}</p>
</div>

<script>
this.data.name = '';
</script>

Try this example in the Playground!

Element types 🔗

Lucid's model system works with HTML elements of type input, select and textarea.

For select elements, the model will automatically set the element's selected option.

For checkboxes and radios, the model will establish a truthy/falsy value from the corresponding data property. So for example:

<div>
    <input type=checkbox data-lmodel=checked>
    <button onclick=uncheck>Uncheck</button>
</div>
<script>
this.data.checked = 'foo';
this.events.uncheck = () => this.data.checked = 0;
</script>

That will resolve to a checked checkbox. Even though the string "foo" is not itself a boolean value, which is what a checkbox's checked property expects, Lucid will "cast" it to its truthy/falsy equivalent - in this case, true.

Correspondingly, later setting the data property to anything that resolves to false (such as an empty string, or zero), as our button does, will uncheck the checkbox.

Try this example in the Playground!

Did I help you? Feel free to be amazing and buy me a coffee on Ko-fi!