Component Base Properties and Methods

The component class is an abstract class intended to be the base class for views. It is also the base class for the BoundComponent class.

The Component class is intended to be used as the base class for views you might create. It is also used as the base class for the BoundComponent class, which is nothing more than a small (one-element), one- or two-way bound view. The bulk of the class is in the constructor, which is described in a different api document. The rest is described here.

All components must implement IContent, which means they have a content property, representing the HTML content of the component.

If you are building a view, it is recommended that you implement IView, which means only that there is also a viewModel property.

Link to the demo script

API

Code Type Detail
inject(selector = '[ichigo]', options?, constructor?) static method

The inject method can be used to construct a single component (where it is not very useful) or multiple components from currently existing HTML elements.

  • selector: This selects the HTML elements to be modified. This can be a CSS selector to be passed into document.querySelectorAll(), a single element, a nodelist (the result of document.querySelectorAll()), an array, or an object containing {parent, selector}, which translates to parent.querySelectorAll(selector).
  • options: options to be passed into the component constructor. When injecting, you can set replace to true and include HTML for the new component, which deletes the existing element and uses the supplied HTML instead. If you send a string, this is the same as if you sent outerHtml and replace: true.
  • constructor: constructor of the component class, if the constructed component is to be a different type of component. If not provided, the current component class is used.
The return value is always an array of components, because inject() allows multiple replacements at a time (it's the very reason it was created).

content public field

Every component has a content property, which references the physical footprint, in the HTML page, of the component. The content is where the content is displayed.

id {get; set;} public property

This mirrors the id of the content element.

innerHTML {get; set;} public property

This mirrors the innerHTML of the content element.

value {get; set;} public property

If the content element is a form field, this gets and sets the field value, using whatever means is used by the element type (it varies).

className {get; set;} public property

This mirrors the className of the content element.

classList {get;} public property

This mirrors the classList of the content element.

style {get;} public property

This mirrors the style of the content element.

addEventListener(eventType, event, options?): this public method

This mirrors the addEventListener() method of the content element.

addInlineEventListeners(componentFilter): this public method

If called, this searches the content element for all elements having properties named i5_event, :event, or data-i5_event. On these elements, it takes the attribute in parentheses (or underscores) as the event type and the value of that attribute as the method to use. Then it calls addEventListener() using those details. For example, <button :event (click)="buttonWasClicked"> calls button.addEventListener(click, this.buttonWasClicked.bind(this)).

  • componentFilter: If populated, only elements where the component attribute matches the value are selected. For example, only one of the following is matched: <button :event (click)="buttonWasClicked" component="thisComponent"> <button :event (click)="buttonWasClicked" component="someUnrelatedComponent">

Even though parentheses are legal fields for attributes, the setAttribute()/getAttribute() functions will choke on them. You may prefer <button :event _click_="buttonWasClicked">, though it is not idiomatic.
append(child): this public method

This mirrors the appendChild() method of the content element, except that child can also be a component. Fluent.

appendChild(child) public method

This mirrors the appendChild() method of the content element, except that child can also be a component. NOT fluent.

appendToParent(parent): this public method

This calls appendChild() on the parent, using the component content as the argument. The parent can also be a component.

mapComponent(): this public method

This adds the component to ComponentMap.components, a WeakMap that can get an added component class by looking up its content element.

unmapComponent(): this public method

This removes the component from ComponentMap.components.

getAllChildComponents() public method

This returns all components found within the content element, if they have been mapped.

setStyle(style): this public method

Sets style of the content element, except that this can also take an object of the format { "text-decoration": "wavy" }.

addClass(class): this public method

Adds to the classList of the content element. Takes either an array of class names or a space-delimited list.

Type definitions