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

FormView

Extends:

Core → View → FormView

A FormView is data fields to bind input, select or textarea by theirs names.

Example:

// Create a FormView bound to loginForm
views.form = new FormView('loginForm');

evts.form_submit = function(sender, e) {
  var body = this.data;
  http.post('/login', { body });
}
{@lang xml}
<form id="loginForm">
  <input type="text" name="email">
  <input type="password" name="password">
  <button type="submit">Sign in</button>
</form>

Member Summary

Public Members
public get

data: *

public set

Method Summary

Public Methods
public

findEl(id: *): *

also returns form element by name.
public

formatLocalDateTime(date: *): *

public

getValueOf(field: string): Any

Get field value as the type.
Private Methods
private

_assignFromFields(data: {}): *

private

_setFieldValue(name: *, val: *)

private

_valueAsType(el: *): *

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 Members

public get data: * source

data to elements text or value, innerHTML of elements

Override:

View#data

public set data source

data to elements text or value, innerHTML of elements

Override:

View#data

Public Methods

public findEl(id: *): * source

also returns form element by name.

Override:

View#findEl

Params:

NameTypeAttributeDescription
id *

Return:

*

public formatLocalDateTime(date: *): * source

Params:

NameTypeAttributeDescription
date *

Return:

*

public getValueOf(field: string): Any source

Get field value as the type.

Params:

NameTypeAttributeDescription
field string

target field

Return:

Any

the value

Private Methods

private _assignFromFields(data: {}): * source

Params:

NameTypeAttributeDescription
data {}
  • optional
  • default: {}

Return:

*

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

Override:

View#_setFieldValue

Params:

NameTypeAttributeDescription
name *
val *

private _valueAsType(el: *): * source

Params:

NameTypeAttributeDescription
el *

Return:

*