Beginner Guide to Total.js UI: #02 Understanding Paths

Welcome back to our series on mastering Total.js UI! If you’ve been following along, you should have already completed the installation and setup of Total.js UI, giving you a solid foundation to work with. In this post, we’re diving into one of the most crucial concepts in Total.js UI: Paths.

Paths are like the roadmap of your application. They help you navigate through your data, manage functions, and control actions with precision. If you’re a front-end developer coming from other frameworks like React, Angular, or Vue, you’ll find that paths in Total.js UI offer a unique and powerful way to handle your application's state and behavior.

This blog post is aimed at developers who are just getting started with Total.js UI. Whether you’re transitioning from other popular frameworks or are entirely new to the concept, this guide will walk you through the essentials of paths in Total.js UI, ensuring you’re well-equipped to start building dynamic and interactive web applications.

What are Paths in Total.js UI?

In Total.js UI, paths are akin to addresses in a real-world postal system. Just as you use an address to send a letter to the correct location, paths in Total.js UI guide your data and functions to their correct destination within your application. They are the foundation for creating organized and maintainable code, allowing you to easily access and modify data.

For example, imagine you're sending a package. You need the correct address (path) to ensure it arrives at the right place. Similarly, in Total.js UI, paths help you locate and manipulate specific pieces of data or functions. Without paths, managing data in your application would be like trying to deliver a package without an address—nearly impossible.

Types of Paths

Paths in Total.js UI come in various forms, each suited to different scenarios. Understanding these types is essential for effectively managing data and actions in your applications.

Absolute Paths

Absolute paths are the full addresses of your data or functions. They point directly to the exact location, leaving no room for ambiguity.

Real-Life Example:
Think of absolute paths like mailing a letter to a specific house number in a city. No matter where you are, the letter will always reach the intended house because the address is complete and specific.

Code Example:

SET('users.form.age', 30);

Here, users.form.age is an absolute path that directly references the age property in the users.form object. No matter where in your application you are, this path will always lead to the age property of the users.form.

Relative Paths

Relative paths are like giving directions relative to a landmark rather than a specific address. They are defined concerning the current context or scope, making them more flexible and dynamic.

Real-Life Example:
Imagine giving directions by saying, "Turn left at the grocery store," rather than specifying the exact street name. The directions change depending on where the person is starting, but they still lead to the intended destination.

Code Example:

SET('?.age', 30);

In this case, ?.age is a relative path that depends on the current scope. The exact location of age depends on the context in which this code is executed.

Explicit and Implicit Paths

Paths can be either explicitly declared or implicitly inferred, depending on how they are defined in your code.

Explicit Paths

Explicit paths are those you define directly in your code, making your intentions clear and your code easy to read.

Real-Life Example:
Think of explicitly writing down an address on an envelope before sending a letter. It’s clear, deliberate, and leaves no room for confusion.

Code Example:

<script>
    var mypath = 'Hello world';
</script>

Here, mypath is an explicitly declared path. You can easily reference this path throughout your script, just as you would use a clearly written address to send a letter.

Implicit Paths

Implicit paths are inferred from DOM elements, typically using attributes like id. They are automatically available, making them convenient but sometimes less clear.

Real-Life Example:
This is like relying on a known landmark to identify a location, such as "the house with the red door." While convenient, it might not be as clear to someone unfamiliar with the area.

Code Example:

<li id="mypath"></li>

In this case, mypath is an implicitly declared path, available for use without needing an explicit declaration in your JavaScript.

Scoped Paths

Scoped paths use the ? character to refer to data within the nearest enclosing scope. This allows for concise and context-sensitive paths.

Real-Life Example:
Imagine you’re at a large family gathering, and someone says, “Could you pass the salt?” You know they mean the salt shaker on the nearest table, not one in the kitchen or elsewhere. The context determines the scope.

Code Example:

<ui-plugin path="obj">
    <ui-bind path="?.message" config="text"></ui-bind>
</ui-plugin>

<script>
    var obj = { message: 'Hello world' };
</script>

Here, ?.message is a scoped path. It dynamically refers to the message property within the current scope defined by the ui-plugin.

Temporary Paths

Temporary paths, prefixed with %, are used for transient data that doesn’t need to persist. They are perfect for short-lived data such as user inputs or temporary calculations.

Real-Life Example:
Consider a Post-it note. You jot down a quick reminder, but it’s not meant to be kept forever. It’s temporary, just like data stored in a temporary path.

Code Example:

SET('%search', 'example search');

This creates a temporary path for search, storing it in a transient context. This path is perfect for data that doesn’t need to persist beyond the current session or interaction.

Using GET and SET with Paths

Paths in Total.js UI work hand-in-hand with the GET and SET methods, which allow you to retrieve or update data stored at specific paths.

SET Method

The SET method is like mailing a package to a specific address—you are sending data to a specific path within your application.

SET('users.form.age', 30);

In this example, SET assigns the value 30 to users.form.age. It’s akin to delivering a package directly to someone’s house.

GET Method

The GET method is like checking your mailbox—you retrieve the data that has been sent to a specific path.

console.log(GET('common.page'));

This retrieves the data stored at common.page and logs it to the console, just like reading a letter that arrived in your mailbox.

Watching Changes in Paths

The WATCH method in Total.js UI allows you to observe changes in specific paths and react to them in real-time. It’s like having a security camera that alerts you whenever someone arrives at your door—you get notified whenever there’s a change.

WATCH('path.to.model', function(path, value, type) {
    console.log('NEW VALUE', value);
});

In this example, the WATCH method monitors changes at path.to.model and executes a function whenever the value changes, logging the new value.

Video Tutorial

To complement this blog post, we’ve prepared a video tutorial that covers everything you need to know about paths in Total.js UI. In the video, we walk you through each concept with practical examples, making it easier to understand and apply these ideas in your projects.

This video is an excellent resource for visual learners and those who prefer to see the concepts in action. Don't forget to subscribe to our YouTube channel for more tutorials in this series!

Conclusion

Paths are the backbone of data management in Total.js UI. By understanding the different types of paths and how to use them, you’ll be able to navigate through your data with ease, making your applications more dynamic and responsive.

In this post, we covered the basics of paths, including absolute, relative, explicit, implicit, scoped, and temporary paths. We also explored how to use GET and SET to manipulate data and how to use WATCH to observe changes in real-time.

Mastering paths will open up new possibilities for your Total.js UI projects, giving you the tools you need to create robust, maintainable applications. In the next post, we’ll dive deeper into binding and how it interacts with paths to create even more powerful UIs. Stay tuned!