Class: Component

Component(dataObjectopt, optionsopt)

`Component` contains the reactive logic for a responsive UI element. It manages its DOM fragment based on events from DataModels and DataCollections as well as user input events. It also tracks listeners so that on `cleanup` it can deregister itself to prevent object leaks. Bink comes with a library of components so be sure to check the API docs before implementing a common basic view. They are also pretty good examples of how to write Components.

Constructor

new Component(dataObjectopt, optionsopt)

Parameters:
Name Type Attributes Default Description
dataObject DataObject <optional>
 null
options Object <optional>
 {}
Properties
Name Type Attributes Default Description
dom HTMLElement <optional>
 div The HTML element that contains this Component's UI
anchor string <optional>
 null A URL that to which the document will traverse if the `dom` is clicked.
name string <optional>
 null If set, calls Component.setName with the value
Source:
Example

A toggle with a label

class BinaryComponent extends Component {
	constructor(dataObject=null, options={}) {
		super(dataObject, Object.assign(options, {
			label: null,
			dataField: null,
			dom: dom.span() // Default to a `span` DOM element
		})
		this.addClass('binary-component')

		// Check that we have the info we need
		if (typeof this.options.dataField !== 'string') {
			throw new Error('BinaryComponent requires a `dataField` option')
		}
		if (this.dataObject instanceof DataModel === false) {
			throw new Error('BinaryComponent requires a DataModel')
		}

		// Use a few sub-Components for UI
		this._labelComponent = new LabelComponent(undefined, {
				text: this.options.label || lt('No label')
		}).appendTo(this)

		this._toggleComponent = new SwitchComponent( this.dataObject, {
			dataField: this.options.dataField
		}).appendTo(this)
	}
}

Members

anchor

A URL that to which the document will traverse if the `dom` is clicked, usually set via the constructor's `Option.anchor`
Source:

anchor

Source:

dataObject

`Component.dataObject` can be null or any class that extends DataObject. By default, that's DataModel and DataCollection but coders may create their own DataObject extension.
Source:

dom

The DOM object that contains this Component's UI. You can override the default `dom` value from the constructor by passing an HTMLElement into the constructor's `options.dom`.
Source:
Example

Use it like any normal DOM element

	myComponent.dom.setAttribute('data-example', 'new-value')

options :Object

Type:
  • Object
Properties:
Name Type Attributes Default Description
dom HTMLElement <optional>
 null
Source:

Methods

addClass(…classNames) → {Component}

Add one or more classes to this component's dom `class` attribute without removing any existing classes. This is optional but the best practice is to add a unique name for classes that extend `Component`.
Parameters:
Name Type Attributes Description
classNames string <repeatable>
Source:
Returns:
returns `this` for chaining
Type
Component

append(childComponent) → {Component}

Adds the childComponent's `dom` as a child of this Component's `dom`
Parameters:
Name Type Description
childComponent Component
Source:
Returns:
returns `this` (not the child component) for chaining
Type
Component

appendTo(parentComponent) → {Component}

A handy method for quick creation and setting of a parent:
Parameters:
Name Type Description
parentComponent Component The component to which `this` is appended
Source:
Returns:
returns `this` (not the parent component) for chaining
Type
Component
Example
this._fooComponent = new FooComponent().appendTo(parentComponent)

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

cleanup() → {Component}

Called to dispose of any resources used by this component, including any listeners added via Component.listenTo. Extending classes *should* override and release any resources that they control.
Source:
Returns:
- the Component should not be used after this but the return is useful for chaining
Type
Component

hide() → {Component}

Hides the dom by adding the `hidden` class
Source:
Returns:
returns `this` for chaining
Type
Component

listenTo(eventName, target, callback, onceopt)

Listen to a DOM, Component, or DataObject event. The nice thing about using `listenTo` instead of directly adding event listeners is that Component.cleanup will remove all of those listeners to avoid leaking this object.
Parameters:
Name Type Attributes Default Description
eventName string
target HTMLElement | EventHandler
callback EventHandler~eventCallback
once boolean <optional>
 false only listen to the first event, then unbind
Source:
Examples
this.buttonDOM = dom.button('Click me')
	this.listenTo('click', this.buttonDOM, (domEvent) => { ... })

	
this.buttonComponent = new ButtonComponent(...).appendTo(this)
	this.listenTo(ButtonComponent.ActivatedEvent, this.buttonComponent, (eventName) => { ... })

	
this.exampleModel = new DataModel({ someField: 42 })
	this.listenTo('changed:someField', this.exampleModel, (eventName, ...params) => { ... })

removeClass(…classNames) → {Component}

Remove one or more classes from this component's dom `class` attribute without changing other classes
Parameters:
Name Type Attributes Description
classNames string <repeatable>
Source:
Returns:
returns `this` for chaining
Type
Component

removeComponent(childComponent, cleanopt) → {Component}

Removes the childComponent's `dom` from this Component's `dom`
Parameters:
Name Type Attributes Default Description
childComponent Component
clean boolean <optional>
 true if true, call Component.cleanup on the removed Component
Source:
Returns:
returns `this` (not the childComponent) for chaining
Type
Component

setName(name) → {Component}

Sets the `name` attribute on this component's `dom.dataset` attribute. This is optional but it can be useful during debugging.
Parameters:
Name Type Description
name string
Source:
Returns:
returns `this` for chaining
Type
Component

show() → {Component}

Shows the dom by removing the `hidden` class
Source:
Returns:
returns `this` for chaining
Type
Component

Type Definitions

textFormatter(value)

Parameters:
Name Type Description
value string
Source:
Returns:
string