How to use two-way binding in Nullstack

Nullstack is a feature-driven full stack JavaScript framework that helps you build isomorphic applications and stay focused on shipping products to production. One of the features that makes Nullstack stand out is its support for two-way binding between your component state and the DOM.

Two-way binding means that any changes made to your component state will be automatically reflected in the DOM, and vice versa. This makes it easy to create interactive UIs without having to manually update the DOM or listen for events.

In this post, I will show you how to use two-way binding in Nullstack with some examples.

How to bind a variable to an input element

One of the most common use cases for two-way binding is to bind a variable to an input element, such as a text field or a checkbox. To do this, you just need to use the bind attribute on the input element and assign it the name of your variable.

For example, let’s say we have a component called Form that has a variable called name. We want to bind this variable to an input element so that we can get the user’s name. Here is how we can do it:

class Form extends Nullstack {
  // variables are just variables
  name = '';

  render() {
    return (
      <form>
        {/* two way bindings */}
        <input bind={this.name} />
      </form>
    );
  }
}

Now, whenever we type something in the input element, it will update the value of this.name in our component state. And whenever we change the value of this.name programmatically, it will update the value of the input element in the DOM.

How to bind an object property to an input element

Sometimes, we may want to bind an object property instead of a simple variable. For example, let’s say we have a component called Profile that has an object called user with properties like name, email, and age. We want to bind these properties to different input elements so that we can edit them.

To do this, we just need to use dot notation on the bind attribute and assign it the path of our object property.

For example:

class Profile extends Nullstack {
  // objects are just objects
  user = {
    name: 'Nulla',
    email: 'nulla@nullstack.app',
    age: 21,
  };

  render() {
    return (
      <form>
        {/* two way bindings with dot notation */}
        <input bind={this.user.name} />
        <input type="email" bind={this.user.email} />
        <input type="number" bind={this.user.age} />
      </form>
    );
  }
}

Now, whenever we change any of these input elements, it will update the corresponding property of this.user in our component state. And whenever we change any property of this.user programmatically, it will update the corresponding input element in the DOM.

How to bind an array item or index

Another common use case for two way binding is to bind an array item or index. For example, let’s say we have a component called TodoList that has an array called todos with items like { text: 'Learn Nullstack', done: false }. We want to bind these items or their indexes to different elements so that we can display them and toggle their status.

To do this, we just need to use bracket notation on the bind attribute and assign it either an array item or its index.

For example:

class TodoList extends Nullstack {
  // arrays are just arrays
  todos = [
    { text: 'Learn Nullstack', done: false },
    { text: 'Build awesome apps', done: false },
    { text: 'Have fun', done: true },
  ];

  render() {
    return (
      <ul>
        {/* loop through todos */}
        {this.todos.map((todo) => (
          <li>
            {/* two way bindings with bracket notation */}
            <input type="checkbox" bind={todo.done} />
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    );
  }
}

Now, whenever we check or uncheck any of these checkboxes, it will

update the corresponding property of todo.done in our component state. And whenever we change any property of todo.done programmatically, it will update the corresponding checkbox in the DOM.

Conclusion

In this post, I showed you how to use two-way binding in Nullstack with some examples. Two-way binding is a powerful feature that makes it easy to create interactive UIs without having to manually update the DOM or listen for events. It also reduces the amount of glue code you must write in your application.

If you want to learn more about Nullstack, you can check out its official website, documentation, or GitHub repository. You can also join its Discord community if you have any questions or feedback.

I hope you enjoyed this post and learned something new. Happy coding!