```
**When to use `attr`:**
* Custom attributes that require actual HTML attributes to be set
* Interoperability with third-party libraries that read HTML attributes
* SEO considerations where attributes need to be present in the DOM
* Cases where you need the attribute to be visible in browser dev tools
**Example with custom attribute:**
```typescript
// Custom attribute that reads from HTML attribute
export class TooltipCustomAttribute {
attached() {
// This requires the actual HTML attribute to be set
const tooltipText = this.element.getAttribute('tooltip');
// Setup tooltip with tooltipText
}
}
```
```html
();
public bind(scope: Scope, binding: IBinding) {
// Store the original updateTarget method
const original = binding.updateTarget;
this.originalUpdateTarget.set(binding, original);
// Override updateTarget to add logging
binding.updateTarget = (value) => {
console.log('Binding context:', scope.bindingContext);
console.log('Binding value:', value);
original.call(binding, value);
};
}
public unbind(scope: Scope, binding: IBinding) {
// Restore original updateTarget method
const original = this.originalUpdateTarget.get(binding);
if (original) {
binding.updateTarget = original;
this.originalUpdateTarget.delete(binding);
}
}
}
```
**Usage in Template:**
```html
();
public bind(scope: Scope, binding: IBinding) {
const original = binding.updateTarget;
this.originalMethods.set(binding, original);
binding.updateTarget = (value) => {
original.call(binding, value);
// Add tooltip showing current value
if (binding.target && 'title' in binding.target) {
binding.target.title = `Current value: ${JSON.stringify(value)}`;
}
};
}
public unbind(scope: Scope, binding: IBinding) {
// Restore original method
const original = this.originalMethods.get(binding);
if (original) {
binding.updateTarget = original;
this.originalMethods.delete(binding);
}
// Clear tooltip
if (binding.target && 'title' in binding.target) {
binding.target.title = '';
}
}
}
```
**Usage in Template:**
```html
();
private timeouts = new WeakMap();
public bind(scope: Scope, binding: IBinding, highlightColor: string = 'yellow', duration: number = 500) {
const original = binding.updateTarget;
this.originalMethods.set(binding, original);
binding.updateTarget = (value) => {
original.call(binding, value);
// Clear any existing timeout
const existingTimeout = this.timeouts.get(binding);
if (existingTimeout) {
clearTimeout(existingTimeout);
}
if (binding.target && binding.target.style) {
const originalBg = binding.target.style.backgroundColor;
binding.target.style.backgroundColor = highlightColor;
const timeout = setTimeout(() => {
binding.target.style.backgroundColor = originalBg;
this.timeouts.delete(binding);
}, duration);
this.timeouts.set(binding, timeout);
}
};
}
public unbind(scope: Scope, binding: IBinding) {
// Restore original method
const original = this.originalMethods.get(binding);
if (original) {
binding.updateTarget = original;
this.originalMethods.delete(binding);
}
// Clear any pending timeouts
const timeout = this.timeouts.get(binding);
if (timeout) {
clearTimeout(timeout);
this.timeouts.delete(binding);
}
// Reset background color
if (binding.target && binding.target.style) {
binding.target.style.backgroundColor = '';
}
}
}
```
**Usage in Template:**
```html
Content
Content
```
## Custom Binding Behaviors
You can create your own custom binding behaviors to encapsulate reusable binding modifications. Like value converters, custom binding behaviors are view resources.
Custom binding behaviors implement `bind(scope, binding, [...args])` and `unbind(scope, binding)` methods:
* **`bind(scope, binding, [...args])`**: Called when the binding is created and attached to the DOM. This is where you implement the behavior modification.
* `scope`: The binding's scope, providing access to the view model (`scope.bindingContext`) and override context (`scope.overrideContext`)
* `binding`: The binding instance whose behavior you want to alter (implements `IBinding` interface)
* `[...args]`: Any arguments passed to the binding behavior in the template (e.g., `& myBehavior:arg1:arg2`)
* **`unbind(scope, binding)`**: Called when the binding is detached from the DOM. Clean up any changes made in the `bind` method to restore the binding to its original state and prevent memory leaks.
**Important:** Note the parameter order - `scope` comes **first**, then `binding`. This is different from some other Aurelia lifecycle methods.
Let's look at some practical examples of custom binding behaviors.
### Log Binding Context Behavior
This behavior logs the current binding context to the browser's console every time the binding updates its target (view). This is invaluable for debugging and understanding data flow in your Aurelia application.
```typescript
import { bindingBehavior, type IBinding } from '@aurelia/runtime-html';
import type { Scope } from '@aurelia/runtime';
@bindingBehavior('logBindingContext')
export class LogBindingContextBehavior {
private originalUpdateTarget = new WeakMap
```
**Static content optimization:**
```html
${config.version & oneTime}
![]()
```
### Memory Management
**Proper cleanup in custom behaviors:**
```typescript
export class MyBehavior {
private cleanupMethods = new WeakMap();
bind(scope: Scope, binding: IBinding) {
// Setup with cleanup tracking
}
unbind(scope: Scope, binding: IBinding) {
// Always clean up to prevent memory leaks
const cleanup = this.cleanupMethods.get(binding);
cleanup?.();
this.cleanupMethods.delete(binding);
}
}
```
### Debugging and Development
**Progressive enhancement approach:**
```html
```
### Common Patterns
**Form handling:**
```html
```
**Search functionality:**
```html
```
**Dynamic content:**
```html
${timestamp | timeAgo & signal:'time-update'}
${'greeting.hello' | translate & signal:'locale-change'}
```
## Summary
Binding behaviors provide powerful ways to customize Aurelia's binding system:
* **Built-in behaviors** cover common scenarios like rate limiting, binding modes, and event handling
* **Custom behaviors** enable unlimited extensibility for specialized requirements
* **Proper cleanup** is essential to prevent memory leaks in custom implementations
* **Performance benefits** come from using appropriate behaviors for different use cases
* **Debugging capabilities** make development and troubleshooting easier
Use binding behaviors to create more efficient, maintainable, and user-friendly applications by controlling exactly how your data flows between view and view-model.