enode

An enode is a standalone function with built-in methods to manipulate its associated HTML element, interacting with DOM and other enode(s). It can be generated by using Binh.ElementNode.

Syntax

JavaScript

enode()
enode(item1)
enode(item1, item2)
enode(item1, item2, /* …, */ itemN)

Parameters

item1, ..., itemN

• Accepts various types of data as parameters

Return value

Always return the enode function itself, ready for the chaining method calls.

Description

Since enode is the fundamental unit of the whole UI structure, it is designed to deal with various types of data as parameters. Each type of parameters is handled differently to achieve some purposes, as follows:

undefined, null

• When no parameter is passed to enode, do nothing and simply returns the enode function itself.

string, number and unknown types

• Being parsed to string and appended as text nodes to the current enode's HTML element.

object

• By default, object is treated as pairs of key-value, and assigned to attributes of the current enode's HTML element.
• Native HTML objects like Node, Element, and DocumentFragment will be appended directly to the current enode's HTML element as children.
• Built-in objects like Binh.Router will be appended directly to the current enode's HTML element as children.

Array as special case of object

• Apply all items in array as parameters to the enode function to proceed further.
• Nested arrays will spread items linearly in the order of looping through items in arrays.

function

• By default, function will be invoked with the current enode's HTML element as parameter; after that, the returned value will be handled once again by the enode function.
• Other enodes are special functions, their associated HTML elements will be appended directly to the current enode's HTML element as children.

Examples

Creating enodes using Binh.ElementNode:

JavaScript

var section = new Binh.ElementNode(document.createElement('div'));
var div = new Binh.ElementNode(document.createElement('div'));
var span = new Binh.ElementNode(document.createElement('span'));

// The keyword 'new' is not required
var heading = Binh.ElementNode(document.createElement('h1'));

These enodes will be used for the later examples with different types of parameter.

undefined

JavaScript

section();
section()()(null)();

HTML

<div></div>

Nothing changes since enode function just returns itself.

string, number and unknown types

JavaScript

span('Hello World');
div(1, 2, 3)(NaN, Infinity)(0x10);

HTML

<span>Hello World</span>
<div>123NaNInfinity16</div>

object

JavaScript

div({ class: 'example', style: 'color: red;' });

div(
    heading('This is a heading'),
    span('This is '), 'some texts',
    document.createElement('section')
);

HTML

<div class="example" style="color: red;">
    <h1>This is a heading</h1>
    <span>This is </span>some texts
    <section></section>
</div>

Array

JavaScript

var listOfItems = [
    { class: 'example', style: 'color: red;' },
    heading('This is a heading'),
    span('This is '), 'some texts',
    document.createElement('a')
];

div(listOfItems);

HTML

<div class="example" style="color: red;">
    <h1>This is a heading</h1>
    <span>This is </span>some texts
    <a></a>
</div>

function

JavaScript

div(function(element) {
    // this function can manipulate the origin HTML element associated with enode
    element.appendChild(document.createElement('a'));

    // able to return any type of data for later process of the current enode function
    var output;

    output = 123;
    output = 'some text';
    output = { class: 'foo' };

    output = function() {
        return [
            { class: 'buu' },
            span('another text')
        ];
    };

    return output;
});

HTML

<div class="buu">
    <a></a>
    <span>another text</span>
</div>