Dynamic Lists with WatchList

Reactive lists that automatically update the DOM when items are added or removed. No manual DOM manipulation needed!

Live Demo

Add usernames to the list and watch them appear automatically. Try removing them too!

👥 Total Users: {{count}}

No users yet. Add your first user above!

HTML Template

<x-users-form>
  <input type="text"
         placeholder="Enter username..."
         value="{{username}}"
         x-enter-pressed="add"/>
  <button x-click="add">Add User</button>

  <div>Total Users: {{count}}</div>

  <!-- WatchList automatically renders items here -->
  <div x-list="items"></div>
</x-users-form>

JavaScript Components

function UserItem(self, username) {
  self.username = username;

  // Get first letter for avatar
  self.initial = username.charAt(0).toUpperCase();

  self.remove = () => {
    self.emit('remove-user', self);
  }

  self.template = `
    <div class="user-item">
      <div class="user-info">
        <div class="user-avatar">{{initial}}</div>
        <div class="user-name">{{username}}</div>
      </div>
      <button x-click="remove" class="remove-btn">
        Remove
      </button>
    </div>`;
}

function UsersForm(self) {
  self.username = "";
  self.count = 0;

  // Initialize WatchList with one default user
  self.items = new WatchList([$(UserItem, "John")]);

  self.updateCount = () => {
    self.count = self.items.count();
  };

  self.add = () => {
    if (!self.username) {
      alert("Username cannot be empty");
      return;
    }

    // Add new user to the list
    self.items.add($(UserItem, self.username));
    self.username = "";
    self.updateCount();
  }

  // Listen for remove events
  self.on('remove-user', user => {
    self.items.delete(x => x === user);
    self.updateCount();
  });

  // Initialize count
  self.updateCount();
}

$([UsersForm, UserItem]);

Key Concepts