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.