import View from '@tilfin/flatout/src/view/view.js'

public class | source

View

Extends:

Core → View

Direct Subclass:

FormView, ListView, Page

View

Constructor Summary

Public Constructor
public	constructor(props: object) Create a View.

Member Summary

Public Members
public	contentEl: *
public get	data: * data to elements text or value, innerHTML of elements
public set	data
public	el: * Root element
public	parent: *
public	views: {} Subview children of the view

Private Members
private	_data: *

Method Summary

Public Methods
public	appendEl(el: Element) Append child element
public	broadcast(method: string, args: Array) Cast a message to all children of view
public	completed() For implement after loading completed
public	destroy() 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 Methods
private	_assemble()
private	_bindData()
private	_build(root: , props: ) _loaded resolve after all done
private	_buildFromHtml(data: ):
private	_firstEl(el: ):
private	_loadViewsEvts()
private	_parseEvts(evts: , emap: )
private	_privates(): *
private	_setDataToUI() 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	_teardownEvts()
private	_trapEvt(root: View, el: Element, type: string, handler: function) Bind target event with handler.
private	_unbindData()

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	unescapeHtml(escaped: String): String Unescape HTML
public	unlistened(name: string, -: Function) 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: *)

Public Constructors

public constructor(props: object) source

Create a View.

Override:

Core#constructor

Params:

Name	Type	Attribute	Description
props	object	optional	Properties
props.rootEl	string \| Element	optional	root element ID or root node
props.parent	Class<View>	optional	parent view this belongs to
props.contentEl	string \| Element	optional	parent element of child views (specified by data-id or id value).

Public Members

public contentEl: * source

public get data: * source

data to elements text or value, innerHTML of elements

Properties:

Name	Type	Attribute	Description
data	object

Example:

view.data = { name: 'Mike', inputAge: { value: 24 }, message: { html: "<p>Hello!</p>" } };

public set data source

public el: * source

Root element

public parent: * source

public views: {} source

Subview children of the view

Private Members

private _data: * source

Public Methods

public appendEl(el: Element) source

Append child element

Params:

Name	Type	Attribute	Description
el	Element		child element

public broadcast(method: string, args: Array) source

Cast a message to all children of view

Params:

Name	Type	Attribute	Description
method	string		method name
args	Array		arguments

public completed() source

For implement after loading completed

public destroy() source

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

public findEl(id: *): Element source

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

Params:

Name	Type	Attribute	Description
id	*		data-id value

Return:

Element

Example:

view.findEl('elementDataId');

public fire(name: string, ctx: object) source

Fire event

Params:

Name	Type	Attribute	Description
name	string		event name
ctx	object		event context

Example:

view.fire('move', { newPosition: 1 });

public handle(evts: object) source

Ssetting listener of events.

Params:

Name	Type	Attribute	Description
evts	object		added listener target (ex. evts.subview_event)

public load(views: object) source

For implement creating subviews and setting listener of events.

Params:

Name	Type	Attribute	Description
views	object		added subview target (ex. views.list = new ListView(..))

public prepareData(defaults: object): object | Item source

Prepare data

Params:

Name	Type	Attribute	Description
defaults	object		default data.

Return:

object | Item

modified data or item.

public set(name: string, view: View) source

Set child view as name after load

Params:

Name	Type	Attribute	Description
name	string		view name
view	View		child view. remove if null

Example:

parent.set('name', view);

public unload() source

For implement unloading subviews

public update(name: string, newValue: , oldValue: ): boolean source

Called when the binding data is updated.

Params:

Name	Type	Attribute	Description
name	string		field name
newValue	*		new data value
oldValue	*		old data value

Return:

boolean

true if setting field value succeeded

Private Methods

private _assemble() source

private _bindData() source

private _build(root: , props: ) source

_loaded resolve after all done

Params:

Name	Type	Attribute	Description
root	*
props	*

private _buildFromHtml(data: ): source

Params:

Name	Type	Attribute	Description
data	*

Return:

private _firstEl(el: ): source

Params:

Name	Type	Attribute	Description
el	*

Return:

private _loadViewsEvts() source

private _parseEvts(evts: , emap: ) source

Params:

Name	Type	Attribute	Description
evts	*
emap	*

private _privates(): * source

Return non-enumerable attribute definitions.

Override:

Core#_privates

Return:

private _setDataToUI() source

Set data to subviews or elements in the view.

private _setEvts(el: Element, hmap: object) source

Bind targets with event handler set.

Params:

Name	Type	Attribute	Description
el	Element		event raiser.
hmap	object		handler map. Object<type, value>

private _setFieldValue(name: , val: ): boolean source

Params:

Name	Type	Attribute	Description
name	*
val	*

Return:

boolean

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

Set root node element to this.el

Params:

Name	Type	Attribute	Description
root	*
parent	*
data	*

private _setVal(el: , val: ) source

Params:

Name	Type	Attribute	Description
el	*
val	*

private _setupProps(props: ): source

Params:

Name	Type	Attribute	Description
props	*

Return:

private _teardownEvts() source

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

Bind target event with handler.

Params:

Name	Type	Attribute	Description
root	View		caller
el	Element		event raiser
type	string		event type
handler	function		callback function

View

Extends:

Direct Subclass:

Constructor Summary

Member Summary

Method Summary

Inherited Summary

Public Constructors

public constructor(props: object) source

Override:

Params:

Public Members

public contentEl: * source

public get data: * source

Properties:

Example:

public set data source

public el: * source

public parent: * source

public views: {} source

Private Members

private _data: * source

Public Methods

public appendEl(el: Element) source

Params:

public broadcast(method: string, args: Array) source

Params:

public completed() source

public destroy() source

public findEl(id: *): Element source

Params:

Return:

Example:

public fire(name: string, ctx: object) source

Params:

Example:

public handle(evts: object) source

Params:

public load(views: object) source

Params:

public prepareData(defaults: object): object | Item source

Params:

Return:

public set(name: string, view: View) source

Params:

Example:

public unload() source

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

Params:

Return:

Private Methods

private _assemble() source

private _bindData() source

private _build(root: *, props: *) source

Params:

private _buildFromHtml(data: *): * source

Params:

Return:

private _firstEl(el: *): * source

Params:

Return:

private _loadViewsEvts() source

private _parseEvts(evts: *, emap: *) source

Params:

private _privates(): * source

Override:

Return:

private _setDataToUI() source

private _setEvts(el: Element, hmap: object) source

Params:

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

Params:

Return:

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

Params:

private _setVal(el: *, val: *) source

Params:

private _setupProps(props: *): * source

Params:

Return:

public update(name: string, newValue: , oldValue: ): boolean source

private _build(root: , props: ) source

private _buildFromHtml(data: ): source

private _firstEl(el: ): source

private _parseEvts(evts: , emap: ) source

private _setFieldValue(name: , val: ): boolean source

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

private _setVal(el: , val: ) source

private _setupProps(props: ): source