BETA
My accountGet started
Sep 232024
Total.js Platform
3 min read

Total.js UI #4: Data Binding (Part 2 – 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.

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:

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:

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:

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.

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:

And the corresponding function in app.js:

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:

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!