Class: Binder

Binder(component)

Binder listens for events on EventHandlers or DOM elements and changes characteristics of an HTMLElement or Component in response. This is part of what makes a Component "reactive".

Constructor

new Binder(component)

Parameters:
Name Type Description
component Component
Source:

Methods

bindAttribute(dataField, target, attributeName, formatteropt, dataModel)

Sets an attribute of the target DOM element to the value of dataModel.get(dataField), even as it changes. `formatter` defaults to the identity function but can be any function that accepts the value and returns a string.
Parameters:
Name Type Attributes Default Description
dataField string The name of the field on the `DataModel`
target HTMLElement The DOM element to manipulate
attributeName string The DOM element's attribute to change
formatter Component~textFormatter <optional>
 null defaults to identity (no change to field data)
dataModel DataModel
Source:
Example
this.component = new Component(
	new DataModel({ isAmazing: false })
)
this.component.bindAttribute(
	'isAmazing', 		// dataField
	this.component.dom,	// target
	'data-example',		// attributeName
	(value) => { return value ? 'is-amazing' : 'not-amazing' }
)
// Now any changes to this.component.dataObject will change the `data-example` attribute
this.component.dataObject.set('isAmazing', true)

bindText(dataField, target, formatteropt, dataModelopt)

Sets the `innerText` of the target DOM element to the value of dataModel.get(dataField), even as it changes. `formatter` defaults to the identity function but can be any function that accepts the value and returns a string.
Parameters:
Name Type Attributes Default Description
dataField string The name of the field to watch
target HTMLElement The DOM element whose `innerText` will be manipulated
formatter Component~textFormatter <optional>
 null
dataModel DataModel <optional>
 this.dataObject defaults to this Component's `dataObject`
Source:
Example
this.component = new Component(
	new DataModel({ description: 'Some example text' })
)
this.component.bindText(
	'description', 		// dataField
	this.component.dom,	// target
	(value) => { return (typeof value === 'string') ? value.toUpperCase() : '' }
)
	// Now any changes to the DataModel's `description` field will be displayed by the component

listenTo(eventName, target, callback, onceopt) → {Component}

Listen to events from a DOM element or EventHandler in a way that they can be automatically cleaned up. Inside of a `Component`'s implementation you should use `listenTo` instead of directly listening using `HTMLElement.addListener` or EventHandler.addListener. The advantage of using `Component.listenTo` is that `Component` will keep track of these events and listener functions and then clean them up in Component.cleanup.
Parameters:
Name Type Attributes Default Description
eventName string | Symbol for DOM elements this will be a string like 'click' and for `Components` it will be a Symbol like `ButtonComponent.ActivatedEvent`
target HTMLElement | EventHandler the object whose events should be listened to
callback EventHandler~eventCallback the function that is called when a matching event arrives
once boolean <optional>
 false if true, the listener will be automatically removed when its first event arrives
Source:
Returns:
- return `this` for chaining
Type
Component
Examples

Listen to DOM element events

class MyComponent extends Component {
	constructor(dataObject=null, options={}) {
		super(dataObject, options)

		// Listen to the Component's DOM fragment root:
		this.listenTo('click', this.dom, (domClickEvent) => {
			// Handle the entire Component's DOM click events
		})

		// Listen to events on a child DOM element
		const buttonEl = dom.button('Click me').appendTo(this.dom)
		this.listenTo('click', buttonEl, (ev) => {
			// Handle the button's DOM click event
		})
	}
}

Listen to a sub-Component's events

class AnotherComponent extends Component {
	constructor(dataObject=null, options={}) {
		super(dataObject, options)

		this.buttonComponent = new ButtonComponent(undefined,
			{ text: 'Click me' }
		).appendTo(this)
		this.listenTo(
			ButtonComponent.ActivatedEvent,
			this.buttonComponent,
			(eventName) => {
				// Handle the button's activated event
			}
		)
	}
}