Data binding

This second post will describe how to bind data to elements/components. In my approach I tried to simplify how the framework handles data.

In web development it's very common to need: If some array exists Then render each item in the array.

Angular separates these steps into two structural directives, *ngIf and *ngFor which can't be applied to the same element. I believe React requires the developer to return a default empty array in place of a falsy value (but this may have changed since I last worked with React).

It seemed to me "If falsy, do nothing" was worth handling instead of relying on the developer to guard the framework against falsy values. Also, non-arrays should be treated as single-element arrays. These assumptions result in a flexible data property that handles each of these inputs:

• falsy -> []
• truthy -> [truthy]
• [...any] -> [...any]

Element Data Binding

// single truthy value
div({ data: () => "Hello World" }, (message: string) => 
    span({}, () => message)
)

// array of values
div({ data: () => ["Hello", "World"] }, (message: string) => 
    span({}, () => message)
)

// falsy value
div({ data: () => false }, (message) => 
    span({}, () => message)
)

Results in:

<div> <!-- "Hello World" -->
    <span>Hello World</span>
</div>

<div> <!-- ["Hello", "World"] -->
    <span>Hello</span>
    <span>World</span>
</div>

<div> <!-- false -->
    <!-- nothing is rendered -->
</div>

Sandbox link

Component Data Binding

Components declare an arbitrary input type using the first generic parameter of the Component<T> class. Within a Component, input data is accessed using this.Data property. When using a component, data is passed to the component using the data property of the component configuration object.

// Input type
type MessageHeaderData = { message: string };
// Type is included as part of the Component definition
class MessageHeader extends Component<MessageHeaderData> {
  Template() {
    return h1({}, () => this.Data.message);
  }
}

// Pass MessageHeaderData to the component
messageHeader({ data: () => ({ message: "Hello World" }) });

Sandbox link

Next post will cover adding event listeners to elements/components.