Documentation Namespace: html

Classes

ajax
observable
observableArray
Promise

Members

<static> context

HtmlJs context

Properties:

Name	Type	Description
`context`	HTMLElement	Current selected element of HtmlJs

Example

html('#someContainer');
html.context; // => <div id="someContainer"></div>

<static> Ending symbol

End tag symbol
This method doesn't create any element but set the context HtmlJs to its parent element. You can imagine this method like ending tag in HTML

Properties:

Name	Type	Description
`html`	function	For fluent API

Examples

html(document.body).div.attr({id: 'container'}) // render a DIV tag with id "container"
  .h1.text('h1 element').$  // render h1, append to #container, set the context to parent of h1 - #container
  .h2.text('h2 element').$  // render h2, append to #container, also set the context to parent of h2 - #container

Alternative code

html(document.body).div.attr({id: '#container'});
html('#container').h1.text('h1 element');
html('#container').h2.text('h2 element');

<static> Events

Binding event to the context element. HtmlJs gives you all possible events in HTML DOM events, you can bind events with ease. The framework will handle for you cross browser binding issues. However because some events are new in HTML5, so be careful when working with them, they can't run in some older browsers. List of all available events.

Mouse events click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup
Key events keydown, keypress, keyup
Frame/object events abort, beforeunload, error, hashchange, load, resize, scroll, unload
Form events blur, change, focus, focusin, focusout, inputting, invalid, reset, search, select, submit
Drag events drag, dragend, dragenter, dragleave, dragover, dragstart, drop
Clipboard events copy, cut, paste
Print events afterprint, beforeprint
Media events events canplay, canplaythrough, durationchange, emptied, ended, error, loadeddata, loadedmetadata, loadstart, pause, play, playing, progress, ratechange, seeked, seeking, stalled, suspend, timeupdate, volumechange, waiting
Animation events animationend, animationiteration, animationstart
Transition events transitionend
Misc events message, online, offline, popstate, show, storage, toggle, wheel
Others events copy, cut, paste

Example

var clickCallback = function(e, model) {
    console.log(model);
};
html(document.body).button.text('Test click event with model')
   .onClick(clickCallback, {username: 'sa', password: '123456'});

<static> hr/br

Auto ending elements. Create BR/HR element and append to the current context of HtmlJs

Properties:

Name	Type	Description
`html`	function	For fluent API

Example

html(document.body)
    .button.text('Add new record')
    .br
    .button('Delete selected record');

<static> HTML tags

Render DOM element. Append to the html context if available, otherwise create an in-memory element without parent

All available tag names
'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'object', 'ol', 'ptgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'

Properties:

Name	Type	Description
`html`	function	For fluent API

See:

http://www.w3schools.com/tags/

Methods

<static> after(node)

Insert a new node after the context

Parameters:

Name	Type	Description
`node`	HTMLElement	HTML element to prepend

<static> append(node)

Append a new node to the context

Parameters:

Name	Type	Description
`node`	HTMLElement	HTML element to append

<static> attr(attrObj, val)

Set attribute for the context element

Parameters:

Name	Type	Description
`attrObj`	Object	Attribute object
`val`	String \| Number \| Bool	Value of attribute

Returns:

html - for fluent API

Type: function

Example

html(document.body)
    .a.text('Author')
    .attr({href: 'mailto:author@gmail.com'});

<static> before(node)

Insert a new node before the context

Parameters:

Name	Type	Description
`node`	HTMLElement	HTML element to prepend

<static> checkbox( [observable])

Create input tag with type is "checkbox" and append to the current context of HtmlJs.
If the current context is already input tag then HtmlJs won't generate again, only set its checked property

Parameters:

Name	Type	Argument	Default	Description
`observable`	Boolean \| html.observable	<optional>	false	Observable object represents checked state of checkbox

Returns:

html - For fluent API

Type: function

Example

html(document.body).checkbox(true); // ==> checked
var checked = html.observable(false);
html(document.body).checkbox(checked); // ==> not checked

<static> className(className)

Set className to the context

Parameters:

Name	Type	Description
`className`	String \| html.observable	Class name to add

Returns:

html - For fluent API

Type: Object

Example

html(document.body).button.text('Click me')
    .attr('myButton')
    .className('btn btn-primary);
console.log(document.getElementById('myButton').className); // => btn btn-primary

<static> css(cssObj [, cssValue])

Get/Set style to the context, override existing styles

Parameters:

Name	Type	Argument	Description
`cssObj`	Object \| String		Style object or style name.
`cssValue`	String	<optional>	Style value

Returns:

html

Type: Object

Example

html(document.body).button.text('Click me')
    .attr({id: 'myButton'})
    .css({backgroundColor: '#3071a9'});
html('#myButton').css('backgroundColor'); // => #3071a9

<static> dropdown(list, selectedItem [, displayField] [, valueField])

Render SELECT element

Parameters:

Name	Type	Argument	Description
`list`	Array \| html.observableArray		List items
`selectedItem`	Object		Selected item
`displayField`	String	<optional>	Display field
`valueField`	String	<optional>	Value field

See:

Working with List tutorial

Example

var products = [  
    { name: 'iPhone', price: 900 },
    { name: 'Samsung galaxy', price: 850 },
    { name: 'Google Pixel', price: 800 },
    { name: 'Google nexus', price: 750 }
],
selectedItem = html.observable(this.products[0]);
html(document.body).dropdown(products, selectedItem, 'name', 'name');

<static> each(model, renderer)

Render to a list of DOM from an Array or html.observableArray
NOTE: You have to render number of DOM elements equally for each data item, other wise the engine won't be able to add or remove item correctly

Parameters:

Name	Type	Description
`model`	Array \| html.observableArray	List data to render
`renderer`	function	Renderer.

See:

Working with List tutorial

Returns:

html object for fluent API

Type: Object

Example

var smartPhoneList = ['iPhone', 'Samsung galaxy', 'Google Pixel', 'Google Nexus'];
html(document.body).ul.each(smartPhoneList, function(phone, index) {
    html.li.text(phone);  
});

<static> empty()

Clear all DOM nodes within context element

Example

html(document.body).empty();

<static> extend(destination, source)

Extend an object by another object's properties

Parameters:

Name	Type	Description
`destination`	Object	Destination object
`source`	Object	Source object

<static> find(selector)

Find a child element of the current context using a selector

Parameters:

Name	Type	Description
`selector`	String	String selector or an element

<static> getJSON(url, data [, async])

Create shorthand for request JSON format with 'GET' method

Parameters:

Name	Type	Argument	Default	Description
`url`	String			Url of ajax end point
`data`	Object			Parameter to submit to server
`async`	Boolean	<optional>	true	Type of ajax submit, default is asynchronous NOTE: Synchronous ajax request is depreciated

Returns:

promise - Promise of asynchronous data

Type: html.Promise

Example

var myAjax = html.getJSON('myAjaxURL', {pageIndex: "1", : pageSize "10"}, true);  
myAjax.done(function(data) {  
    console.log(data);  
});

<static> hidden(hidden)

Hidden binding The opposite of visible binding.

Parameters:

Name	Type	Description
`hidden`	Boolean \| html.observable	Indicate that the element should be hidden

Returns:

html - For fluent API

Type: function

Example

var state = html.observable(true);
html(document.body).button.text('Click me').hidden(state);
state.data = false; // show the button
state.data = true;  // hide the button

<static> html(observableStr)

Binding HTML for an element
NOTE: this method is not safe to use, it could be the cause for XSS attack

Parameters:

Name	Type	Description
`observableStr`	String \| html.observable	HTML string or observable string

Returns:

html - Return html for fluent API

Type: function

<static> partial(url, containerSelector)

Partial loading a view, along with scripts and styles

Parameters:

Name	Type	Description
`url`	String	Partial view url
`containerSelector`	String \| Element	Selector of the container which the partial view append to

<static> postJSON(url, data [, async])

Create shorthand for request JSON format with 'POST' method

Parameters:

Name	Type	Argument	Default	Description
`url`	String			Url of ajax end point
`data`	Object			Parameter to submit to server
`async`	Boolean	<optional>	true	Type of ajax submit, default is asynchronous

Returns:

promise - Promise of asynchronous data

Type: html.Promise

Example

var myAjax = html.postJSON('myAjaxURL', {pageIndex: "1", : pageSize "10"}, true);  
myAjax.done(function(data) {  
    console.log(data);  
});

<static> prepend(node)

Prepend a new node to the context

Parameters:

Name	Type	Description
`node`	HTMLElement	HTML element to prepend

<static> serialize(rootObj [, serializer])

Serialize observable data to pure JSON. This method is for submitting data to server.

Parameters:

Name	Type	Argument	Description
`rootObj`	html.observable \| Object		Observable object
`serializer`	function	<optional>	Callback to handle seializing

Returns:

Pure JSON data

Type: Object | Array

<static> text(observable)

Text binding

Parameters:

Name	Type	Description
`observable`	String \| html.observable.<String>	Observable object contain a string

Returns:

html - For fluent API

Type: function

<static> trigger(eventName)

Trigger an event of a DOM element

Parameters:

Name	Type	Description
`eventName`	String	event of a DOM to trigger

Returns:

html - For fluent API

Type: function

Example

var clickCallback = function(e, model) {
    console.log(model);
};
html(document.body).button.text('Test click event with model')
    .attr({id: 'testTrigger')}.onClick(clickCallback, {username: 'sa', password: '123456'});
html('#testTrigger').trigger('click');

<static> unwrapData(observableObj)

Unwrap data from observable object

Parameters:

Name	Type	Description
`observableObj`	html.observable	Observable object to unwrap

Returns:

Underlying data

Type: Object

<static> unwrapNoSideEffect(data [, getNewData])

Unwrap data without notify change nor register dependency

Parameters:

Name	Type	Argument	Description
`data`	html.observable		Observable object
`getNewData`	Boolean	<optional>	Internal use. Get _newData or computed data

Returns:

underlying data

Type: Object

<static> value(observable)

Value binding for HTMLElement that has value property, for example input/textarea

Parameters:

Name	Type	Description
`observable`	Object \| html.observable	Observable or primitive data type

Returns:

html - for fluent API

Type: function

<static> visible(visible)

Show/hide the element based on data

Parameters:

Name	Type	Description
`visible`	Boolean \| html.observable	Indicate that the element should be visible

Returns:

html

Type: function

Example

var state = html.observable(true);
html(document.body).button.text('Click me').visible(state);
state.data = false; // hide the button
state.data = true;  // show the button