Total.js UI #4: Data Binding (Part 2 – Practical Example)

Total.js UI #3: Data Binding (Part 2 – Practical Example)

Welcome back to the second part of our post on Data Binding in Total.js UI. If you haven’t gone through Data Binding (Part 1), I highly recommend reading it first, as it covers all the theoretical concepts you need to understand before jumping into this practical example.

In this post, we will focus on implementing data binding in a real-world scenario using the <ui-bind> element and some of the key attributes and commands we discussed previously. You’ll get hands-on experience with:

Binding data to display user information
Manipulating bound data using commands
Dynamically showing and hiding elements
Handling user input and updating the data model

By the end of this tutorial, you’ll be confident in applying data binding in your own Total.js UI projects.

What We’re Building

For this practical example, we will create a simple User Profile Page. Our page will include:

Displaying the user’s name, email, and age using data binding.
A button that allows the user to update their name, with the new value automatically reflected in the UI.
Conditional logic that shows different messages based on the user’s age.

Let’s dive into the code!

1. Setting Up the HTML Structure

We’ll start with a basic HTML structure where we’ll display the user’s name, email, and age. We’ll also add an input field for updating the user’s name and a button to trigger the update.

Here’s the HTML for our profile page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Profile</title>
   <script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
    <div>
        <h1>User Profile</h1>
        <p>Name: <ui-bind path="user.name" config="text"></ui-bind></p>
        <p>Email: <ui-bind path="user.email" config="text"></ui-bind></p>
        <p>Age: <ui-bind path="user.age" config="text"></ui-bind></p>

        <input type="text" placeholder="Update Name" id="name-input">
        <button onclick="updateName()">Update Name</button>
        
        <ui-bind path="user.age" config="show:value >= 18">You are an adult.</ui-bind>
        <ui-bind path="user.age" config="show:value < 18">You are a minor.</ui-bind>
    </div>

    <script src="app.js"></script>
</body>
</html>

2. The Data Model

In Total.js UI, the data model is typically an object that you can easily modify. For our example, we’ll define a simple user object that contains the name, email, and age. We’ll also define a function for updating the user’s name based on the input field value.

Here’s the app.js file:

// Initialize the user data model
SET('user', {
    name: 'John Doe',
    email: 'john.doe@example.com',
    age: 25
});

// Function to update the user's name
function updateName() {
    var newName = document.getElementById('name-input').value;
    SET('user.name', newName);
}

3. Binding Data to UI Elements

In our HTML, we’ve used the <ui-bind> element to bind data to the user’s name, email, and age. Let’s break down how this works:

Name Binding:

    <p>Name: <ui-bind path="user.name" config="text"></ui-bind></p>

Here, the path attribute points to user.name, which is the property in our data model. The config="text" ensures that the value is displayed as text. Whenever user.name is updated, the <ui-bind> element will automatically update to reflect the new value.

Email and Age Binding:

The same logic applies to the email and age fields, with paths pointing to user.email and user.age, respectively.

    <p>Email: <ui-bind path="user.email" config="text"></ui-bind></p>
    <p>Age: <ui-bind path="user.age" config="text"></ui-bind></p>

4. Updating the Data Model

We’ve added an input field and a button to allow the user to update their name. When the button is clicked, the updateName() function is called. This function gets the value from the input field and updates the user.name property in the data model.

Here’s the relevant part of the HTML:

<input type="text" placeholder="Update Name" id="name-input">
<button onclick="updateName()">Update Name</button>

And the corresponding function in app.js:

function updateName() {
    var newName = document.getElementById('name-input').value;
    SET('user.name', newName);
}

When SET('user.name', newName) is called, Total.js UI automatically updates all elements bound to user.name, ensuring that the UI remains in sync with the data.

5. Showing/Hiding Elements Based on Conditions

Next, we’ll use the show command to conditionally display messages based on the user’s age. If the user is 18 or older, we’ll show a message saying, "You are an adult." If the user is younger than 18, we’ll show a message saying, "You are a minor."

Here’s how we’ve implemented this in HTML:

<ui-bind path="user.age" config="show:value >= 18">You are an adult.</ui-bind>
<ui-bind path="user.age" config="show:value < 18">You are a minor.</ui-bind>

The show command checks whether the value of user.age meets the specified condition. If user.age is 18 or greater, the first message will be shown. If it’s less than 18, the second message will be shown.

By following this practical example, you’ll be ready to apply data binding in your own projects, enabling you to create dynamic, interactive UIs effortlessly.

Next, we’ll dive deeper into more advanced data-binding techniques, including two-way data binding and handling complex data structures. Stay tuned for the next post in our Total.js UI series!