Reactive Counter

Live Demo

Key Features

Reactive State

Automatic UI updates when state changes. No manual DOM manipulation required.

Event Binding

Declarative event handling using data-on attributes. Clean and intuitive.

Data Binding

Two-way data binding keeps your UI in sync with component state automatically.

Component Lifecycle

Full lifecycle hooks for initialization, updates, and cleanup.

Source Code

// Reactive Counter Component
                  Now.getManager('component').define('reactivecounter', {
                  // Enable reactive state management
                  reactive: true,

                  // Component state
                  state: {
                  title: 'Reactive Counter',
                  count: 0
                  },

                  // Component methods
                  methods: {
                  increment() {
                  this.state.count++;
                  console.log('Count:', this.state.count);
                  },

                  decrement() {
                  this.state.count--;
                  console.log('Count:', this.state.count);
                  },

                  reset() {
                  this.state.count = 0;
                  console.log('Counter reset');
                  }
                  },

                  // Lifecycle hooks
                  mounted() {
                  console.log('Counter component mounted');
                  },

                  // Global event handlers
                  events: {
                  'app:cleanup:end': function() {
                  this.state.count = 0;
                  console.log('Counter cleaned up');
                  }
                  }
                  });

<div class="counter-app" data-component="reactivecounter">
                  <!-- Display current count -->
                  <div class="counter-display">
                  <span class="counter-number" data-text="count">0</span>
                  </div>

                  <!-- Control buttons -->
                  <div class="counter-controls">
                  <button data-on="click:decrement" aria-label="Decrease">−</button>
                  <button data-on="click:increment" aria-label="Increase">+</button>
                  </div>

                  <!-- Reset button -->
                  <button data-on="click:reset">Reset Counter</button>
                  </div>


                  .counter-app {
                  text-align: center;
                  padding: var(--space-8);
                  }
                  .counter-display {
                  font-size: 4rem;
                  font-weight: bold;
                  }
                  .counter-controls {
                  display: flex;
                  gap: var(--space-4);
                  justify-content: center;
                  margin-bottom: var(--space-4);
                  }
                  .counter-controls button {
                  font-size: 1.5em;
                  }
                  .counter-number {
                  font-family: var(--font-family-mono);
                  color: var(--color-primary);
                  }

How It Works

1. State Management

The counter uses Now.js reactive state to track the count value. When the state changes, the component automatically updates the display without manual DOM manipulation.

2. Event Handling

Click events are handled using data-on attributes that map directly to component methods. This provides a clean, declarative way to bind events.

3. Data Binding

The data-text directive creates a binding between the state and the DOM. When state.count changes, the display updates automatically.

4. Lifecycle Management

The component properly manages its lifecycle with hooks like mounted() and event cleanup, ensuring no memory leaks or orphaned listeners.