Component class

A Component is a building block of a UserInterface. Every Component should have a template that renders a vanilla Dart HTML element.

There are two types of Components:

"root components" are standalone components that may be registered in a UserInterface. They have independent state, computedState, and handlers. They are not injected into other components.

"sub-components" are child components that are injected into either a root component or another sub-component with a root. They receive a copy of the root's state, computedState and handlers. Whenever a sub-component calls Component.setState, it is actually setting the state of its root component. Sub-components may retain their own computedState values, as long as they are uniquely keyed from the root component.

Constructors

Component({@required Element template(Component), String id, Map<String, dynamic> state, Map<String, dynamic Function(Component)> computedState, Map<String, void Function(Component) Function(Event)> handlers})
Creates a new Component with a required template.

Properties

computedState Map<String, dynamic Function(Component)>
The computedState Map identifies callback functions that can perform computations or access other Component properties, including state. [...]
read / write
handlers Map<String, void Function(Component) Function(Event)>
A handler is an event listener that returns a callback function. Example: key: (e) => (self) => self.setState('...', ...) [...]
read / write
id String
An id that will be prepended with component- and added to the element in the DOM. id: 'counter' -> <id=component-counter>
read / write
lastDOMChanges Map<String, String>
The lastDomChanges Map identifies the selectors used to make the most recent changes to DOM, and a description of the changes. Useful for evaluating the output of the _reconcile function and testing.
read / write
state Map<String, dynamic>
The state Map identifies state values, which are any values that can be referenced or updated directly. [...]
read / write
template Element Function(Component)
A template is a callback function that returns a standard Dart HTML Element when called by Component.render.
read / write
hashCode int
The hash code for this object. [...]
read-only, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited

Methods

getComputed(String key) → dynamic
getComputed fetches a computed value from computedState. [...]
getHandler(String key, Event e) → void
getHandler fetches a handler function from handlers and supplies an event into it. [...]
getState(String key) → dynamic
getState fetches a state value on a root component. If key does not exist in the root state, this throws an exception.
injectComponent(Component component) Element
injectComponent adds a sub-component to the current component. Useful for giving a sub-component access to root component properties. [...]
render() Element
render converts a Component's template into an HTML Element by calling the template's callback function. [...]
setState(String key, dynamic value) → void
setState changes a state value on a root component and then re-renders from the root. If key does not exist in the root state, this throws an exception.
toString() String
Returns a string representation of this object.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited

Operators

operator ==(dynamic other) bool
The equality operator. [...]
inherited