data-bind

Syntax

<element data-bind="propertyPath"></element>

Binds the element's text content to a state property. Updates automatically when the property changes.

Basic Usage

wildflower.component('user-profile', {
    state: {
        username: 'wildflower',
        email: 'user@example.com'
    }
});

<div data-component="user-profile">
    <p>Username: <span data-bind="username"></span></p>
    <p>Email: <span data-bind="email"></span></p>
</div>

Result: Username: wildflower
Email: user@example.com

Nested Properties

Use dot notation to bind to nested properties:

wildflower.component('user-profile', {
    state: {
        user: {
            name: 'John Doe',
            address: {
                city: 'San Francisco',
                country: 'USA'
            }
        }
    }
});

<div data-bind="user.name"></div>
<div data-bind="user.address.city"></div>

Computed Properties

Bind to computed properties directly by name. The computed: prefix is optional. Computed properties take precedence over state when names collide:

wildflower.component('price-display', {
    state: {
        price: 100,
        taxRate: 0.08
    },

    computed: {
        totalPrice() {
            return this.price * (1 + this.taxRate);
        },
        formattedPrice() {
            return `$${this.totalPrice.toFixed(2)}`;
        }
    }
});

<div>Price: <span data-bind="price"></span></div>
<div>Total: <span data-bind="formattedPrice"></span></div>

Variants

data-bind-html

Binds HTML content instead of text content. Use with caution due to XSS risks - only use with trusted content.

<div data-bind-html="htmlContent"></div>

wildflower.component('content-display', {
    state: {
        htmlContent: '<strong>Bold</strong> and <em>italic</em> text'
    }
});

data-bind-class

Dynamically applies CSS classes based on an expression. The expression should evaluate to a space-separated string of class names.

<div data-bind-class="isActive ? 'active' : 'inactive'"></div>
<div data-bind-class="isError ? 'alert alert-danger' : 'alert alert-success'"></div>

wildflower.component('status-display', {
    state: {
        isActive: true,
        isError: false
    },

    toggle() {
        this.isActive = !this.isActive;
    }
});

The expression can reference:

• State properties: isActive, status
• Computed properties: computed.isValid
• List item properties (in list contexts): id, name, index

Live Example

<div data-component="binding-demo">
    <div class="mb-3">
        <label class="form-label">Your Name:</label>
        <input type="text" class="form-control" data-model="name">
    </div>

    <div class="alert" data-bind-class="name.length > 0 ? 'alert-primary' : 'alert-secondary'">
        <p><strong>Greeting:</strong> <span data-bind="greeting"></span></p>
        <p><strong>Length:</strong> <span data-bind="nameLength"></span> characters</p>
        <p class="mb-0"><strong>Uppercase:</strong> <span data-bind="uppercaseName"></span></p>
    </div>
</div>

wildflower.component('binding-demo', {
    state: {
        name: 'World'
    },

    computed: {
        greeting() {
            return `Hello, ${this.name}!`;
        },
        nameLength() {
            return this.name.length;
        },
        uppercaseName() {
            return this.name.toUpperCase();
        }
    }
});

Notes

• Bindings are reactive - updates propagate automatically when state changes
• Computed properties re-evaluate when their dependencies change
• Use data-bind-html only with trusted content to prevent XSS attacks
• For two-way binding on form inputs, use data-model instead of data-bind
• In list contexts, you can bind to item properties directly (e.g., data-bind="name")

Related

• Data Binding Guide - Comprehensive binding documentation
• Computed Properties - Learn about computed properties
• Form Handling - Two-way binding with data-model
• Lists & Iteration - Binding in list contexts