Home Reference Source 
import ListView from '@tilfin/flatout/src/view/list-view.js'
public class | source

ListView

Extends:

Core → View → ListView

View for the collection of items.

Example:

class ListItemView extends View {
  html(data) {
    return `<li>${data.title}</li>`;
  }
}

let instanceView = new ListView(Node, ListItemView,
          {
            data: [
              { title: 'foo' },
              { ttile: 'bar' }
            ]
          });

Constructor Summary

Public Constructor
public

Method Summary

Public Methods
public

addItem(item: object): *

Add an item to list
public

insertItem(item: object, index: number): *

Insert an item to list at index
public

itemViewClass(item: object): Class<View>

If you dynamically change creating item view according to the item, override this method.
public

removeItem(item: object, index: number)

Remove item from list
public

removeItemByView(view: view)

Remove item with view
public

updateItem(item: object, index: number)

Update an item at index
Protected Methods
protected

addItemEl(listEl: Element, itemEl: Element)

If you change adding item effect, override this method.
protected

insertItemEl(listEl: Element, newEl: Element, nextEl: Element)

If you change inserting item effect, override this method.
protected

removeItemEl(listEl: Element, itemEl: Element)

If you change removing item effect, override this method.
Private Methods
private
private

_childElAt(index: number): Element

Return child element at position.
private

_createViewByItem(item: *): *

private

_privates(): *

private

_removeItemByEl(el: element)

Remove item from list by element
private

Inherited Summary

From class Core
public

listened(nameOrObj: string | Object, handler: Function)

Add handler or listener for saying message
public

say(name: string, ctx: *)

Cast a message to the listeners
public

Unescape HTML
public

Remove handler or listener
private

_callR(args: *, target: *, method: *, methodOwner: *)

private

_isFn(f: *): *

private

_isStr(v: *): *

private

_listened(name: *, handler: *)

private

_privates(): {"_F_obs": *}

Return non-enumerable attribute definitions.
private

_say(targetName: *, name: *, ctx: *)

From class View
public get

data: *

data to elements text or value, innerHTML of elements
public set
public
public

el: *

Root element
public

parent: *

public

views: {}

Subview children of the view
private

_data: *

public

appendEl(el: Element)

Append child element
public

broadcast(method: string, args: Array)

Cast a message to all children of view
public

For implement after loading completed
public

Destroy all chidren, unload, and destroy binder, teardown events
public

findEl(id: *): Element

Find an element that has specified data-id else call getElementById
public

fire(name: string, ctx: object)

Fire event
public

handle(evts: object)

Ssetting listener of events.
public

load(views: object)

For implement creating subviews and setting listener of events.
public

prepareData(defaults: object): object | Item

Prepare data
public

set(name: string, view: View)

Set child view as name after load
public

unload()

For implement unloading subviews
public

update(name: string, newValue: *, oldValue: *): boolean

Called when the binding data is updated.
private
private
private

_build(root: *, props: *)

_loaded resolve after all done
private

_buildFromHtml(data: *): *

private

_firstEl(el: *): *

private
private

_parseEvts(evts: *, emap: *)

private

_privates(): *

private

Set data to subviews or elements in the view.
private

_setEvts(el: Element, hmap: object)

Bind targets with event handler set.
private

_setFieldValue(name: *, val: *): boolean

private

_setRootNode(root: *, parent: *, data: *)

Set root node element to this.el
private

_setVal(el: *, val: *)

private

_setupProps(props: *): *

private
private

_trapEvt(root: View, el: Element, type: string, handler: function)

Bind target event with handler.
private

Public Constructors

public constructor() source

Create a View.

Override:

View#constructor

Public Methods

public addItem(item: object): * source

Add an item to list

Params:

NameTypeAttributeDescription
item object

an item

Return:

*

public insertItem(item: object, index: number): * source

Insert an item to list at index

Params:

NameTypeAttributeDescription
item object

an item
index number

target position

Return:

*

public itemViewClass(item: object): Class<View> source

If you dynamically change creating item view according to the item, override this method.

Params:

NameTypeAttributeDescription
item object

an item

Return:

Class<View>

public removeItem(item: object, index: number) source

Remove item from list

Params:

NameTypeAttributeDescription
item object

an item
index number

target position

public removeItemByView(view: view) source

Remove item with view

Params:

NameTypeAttributeDescription
view view

an view of removing item

public updateItem(item: object, index: number) source

Update an item at index

Params:

NameTypeAttributeDescription
item object

an item
index number

target position

Protected Methods

protected addItemEl(listEl: Element, itemEl: Element) source

If you change adding item effect, override this method.

Params:

NameTypeAttributeDescription
listEl Element

parent element for List
itemEl Element

added element

protected insertItemEl(listEl: Element, newEl: Element, nextEl: Element) source

If you change inserting item effect, override this method.

Params:

NameTypeAttributeDescription
listEl Element

parent element for List
newEl Element

an element for new item for List
nextEl Element

next element will be next one for newEl

protected removeItemEl(listEl: Element, itemEl: Element) source

If you change removing item effect, override this method.

Params:

NameTypeAttributeDescription
listEl Element

parent element for List
itemEl Element

removed element

Private Methods

private _bindData() source

Override:

View#_bindData

private _childElAt(index: number): Element source

Return child element at position.

Params:

NameTypeAttributeDescription
index number

item position.

Return:

Element

target element

private _createViewByItem(item: *): * source

Params:

NameTypeAttributeDescription
item *

Return:

*

private _privates(): * source

Return non-enumerable attribute definitions.

Override:

View#_privates

Return:

*

private _removeItemByEl(el: element) source

Remove item from list by element

Params:

NameTypeAttributeDescription
el element

removed element

private _setDataToUI() source

Set data to subviews or elements in the view.

Override:

View#_setDataToUI