Update Modes

Control when form inputs update your data with update modes. Choose between immediate updates, change-based updates, or debounced updates for optimal performance and user experience.

The Three Update Modes

WakaPAC provides three update modes that control when input changes synchronize to your data model:

  • immediate - Updates on every keystroke (default)
  • change - Updates when input loses focus
  • delayed - Updates after a configurable delay

Immediate Mode

The default mode. Updates data on every keystroke, providing instant feedback:

<div id="app">
    <!-- No mode specified = immediate -->
    <input data-pac-bind="value: username" placeholder="Username">

    <p>Character count: {{username.length}}</p>
    <p data-pac-bind="visible: isValid">✓ Valid username</p>
    <p data-pac-bind="visible: !isValid">✗ Minimum 3 characters</p>
</div>

<script>
    wakaPAC('#app', {
        username: '',

        computed: {
            isValid() {
                return this.username.length >= 3;
            }
        }
    });
</script>

When to use: Real-time validation, character counters, live previews, password strength meters

Change Mode

Updates data when the input loses focus (blur event). Reduces update frequency:

<div id="app">
    <p>Email: <input data-pac-bind="value: email" data-pac-update-mode="change"></p>
    <p>Password: <input data-pac-bind="value: password" data-pac-update-mode="change" type="password"></p>

    <button data-pac-bind="click: save">Save</button>
    <p>{{message}}</p>
</div>

<script>
    wakaPAC('#app', {
        email: '',
        password: '',
        message: '',

        watch: {
            email(newEmail) {
                // Only called when input loses focus
                console.log('Email changed to:', newEmail);
            }
        },

        save() {
            this.message = `Saving ${this.email}...`;
        }
    });
</script>

When to use: Server-side validation, auto-save on blur, traditional forms, fields where immediate updates aren't needed

Delayed Mode

Updates data after a specified delay (in milliseconds) following the last keystroke. Perfect for debouncing expensive operations:

<div id="app">
    <input data-pac-bind="value: searchQuery"
           data-pac-update-mode="delayed"
           data-pac-update-delay="500"
           placeholder="Search...">

    <p>Searching for: {{searchQuery}}</p>
    <p>API calls made: {{apiCallCount}}</p>

    <ul data-pac-bind="foreach: results" data-pac-item="result">
        <li>{{result}}</li>
    </ul>
</div>

<script>
    wakaPAC('#app', {
        searchQuery: '',
        results: [],
        apiCallCount: 0,

        watch: {
            async searchQuery(query) {
                if (!query) {
                    this.results = [];
                    return;
                }

                // Only called 500ms after user stops typing
                this.apiCallCount++;
                console.log('Searching for:', query);

                // Simulate API call
                this.results = [
                    `Result 1 for "${query}"`,
                    `Result 2 for "${query}"`,
                    `Result 3 for "${query}"`
                ];
            }
        }
    });
</script>

When to use: Search autocomplete, live filters, API queries, expensive computations, database lookups

Mode Comparison

Mode Trigger Event Update Frequency Use Case
immediate Every keystroke (input event) Highest Real-time feedback, validation
change Focus loss (change event) Low Server validation, forms
delayed After delay since last keystroke Lowest (debounced) Search, API calls, expensive ops

Configuration

Per-Element Configuration

Set modes on individual inputs using data attributes:

<!-- Immediate (default) -->
<input data-pac-bind="value: name">

<!-- Change mode -->
<input data-pac-bind="value: email" data-pac-update-mode="change">

<!-- Delayed mode with 300ms delay -->
<input data-pac-bind="value: search"
       data-pac-update-mode="delayed"
       data-pac-update-delay="300">

Global Configuration

Set default mode for all inputs in a component via options:

wakaPAC('#app', {
    name: '',
    email: '',
    search: ''
}, {
    updateMode: 'change',  // Default mode for all inputs
    delay: 300             // Default delay for 'delayed' mode
});

Per-element configurations override global settings.

Performance Tip: Delayed mode doesn't just reduce DOM updates - it also reduces watcher executions and computed property recalculations, making it ideal for expensive reactive chains.