Binding

Torpor supports two-way binding for updating the application's state from user input.

Consider the following component:

export default function Component() {
	let $state = $watch({ name: "Torpor" })

	@render {
		<div>
			<p>
				Your name: <input value={$state.name}>
			</p>
			<p>
				Welcome, {$state.name}!
			</p>
		</div>
	}
}

The component contains an input and a welcome message which changes when the value of $state.name is changed. $state.name has an initial value which is shown in the input and welcome message but is not updated when the input's value is changed. To update $state.name when the input value is changed, you can use the special :value attribute:

export default function Component() {
	let $state = $watch({ name: "Torpor" })

	@render {
		<div>
			<p>
				@// Here:
				Your name: <input :value={$state.name}>
			</p>
			<p>
				Welcome, {$state.name}!
			</p>
		</div>
	}
}

Torpor will create an onchange event for the input that sets $state.name.

Input types

Binding works with inputs and the :value, :checked and :group attributes.

Element binding

Another use for binding is for storing a DOM element in a variable, which is done by adding a :self attribute:

export default function Component() {
	let para

	$mount(() => {
		para.classList.add("large-text")
	})

	@render {
		<p :self={para}>
			Welcome!
		</p>
	}

	@style {
		large-text {
			font-size: 10em;
		}
	}
}

Note that the DOM element will not be available until after the component has been mounted and all its elements added to the DOM, and so you should only access it from within a $mount function.

Playground