DOM Templates

The DOM template repository is separately maintained at https://github.com/PhpGt/DomTemplate

A core concept of developing WebEngine applications is the use of the Document Object Model (DOM). WebEngine exposes the page's DOM to your code as described in DOM manipulation. The DOM implementation aims to be as standards compliant as possible, matching the APIs you'd expect to see in client side code.

Directly manipulating the DOM in your code can lead to tightly coupling the logic and view. As a powerful solution, binding data using custom elements and data attributes leads to highly readable, maintainable view files that are loosely coupled to the application logic.

Custom HTML components

// TODO: Break up large documents into named components.

// TODO: Reference imported components with .c- class.

// TODO: Components can be referenced as a template by name, exactly like data-template names (see below).

The data-template attribute

Outputting template elements for each row of data

// TODO.

Unnamed data-template attributes

// TODO: bind function will clone the element for each row of data.

The data-bind attribute and the bind function

// TODO: text/html synonyms for innertext/innerhtml (attribute keys have to be lowercase).

// TODO: text, html, value treated specially... otherwise data is bound to the attribute specified.

Outputting data to placeholder elements

// TODO.

Binding data within attributes using {curly braces}

// TODO: Curly avoided to prevent reinventing markup language, unavoidable when data is to be bound within attributes.