BackgroundComponent For

The For component can be used to loop over objects inside of templates.It creates a new local variable available for every iteration. It can bedefined in the each attribute. The object to loop over is retrievedfrom evaluating the expression defined in the of attribute.

In the local scope of each item there are also two special propertiesavailable: $index and $key. The names speak for themselves.

Example

A simple example that loops over a list of users.

<for each="user" of="users">    <user>        <h3>${ user.name }</h3>    </user></for>
alias

{ default } from mahalo/components/for

Hierarchy

Index

Constructors

Properties

Methods

Object literals

Constructors

constructor

Properties

children

children:ComponentController[]

A list of child controllers created for each item curentlyin the list.

controller

controller:ComponentController

The component's controller.

each

each:string

The name of the local property.

element

element:Element

The component's element.

generator

generator:ComponentGenerator

The generator used to create the component.

of

of:Object | any[]

The object that is looped over.

template

template:Element

The template for creating items.

Static locals

locals:string[]

This static property defines which properties of the componentshould be available in its local scope which will be used by thecomponent's behaviors as well as by the defining element's children.

Values of this array represent the name of one of the component'sproperties that will be pushed to the local scope.

Example
export default class MyComponent extends Component {    static locals = ['firstName', 'lastName'];}

Static template

template:string = ""

Methods

Private createController

  • Parameters
    • obj: Object
    • key: string | number
    • index: number
    Returns ComponentController

enter

  • enter(): void
  • Returns void

Private hasPrevious

  • hasPrevious(obj: any, key: any, i: any): any
  • Parameters
    • obj: any
    • key: any
    • i: any
    Returns any

leave

  • leave(): void
  • Returns void

Private prepareArray

  • prepareArray(arr: any[]): void
  • Parameters
    • arr: any[]
    Returns void

Private prepareObject

  • prepareObject(obj: Object): void
  • Parameters
    • obj: Object
    Returns void

ready

  • ready(): void
  • Returns void

remove

  • remove(): void

Private setPrevious

update

  • update(obj: any): void

  • Updates the DOM when the list of items has changed.

    Parameters
    • obj: any
    Returns void

Object literals

Static attributes

attributes:object

each

each:string = ""

of

of:string = "."

Static bindings

bindings:object

of

of:string = "update"

Static inject

inject:object

controller

controller:ComponentController = ComponentController

element

element:Element = Element

generator

generator:ComponentGenerator = ComponentGenerator