Documentation

Class: MTEEngine

The MTEEngine is the core class of the template engine. It contains all methods necessary to create templates from JavaScript.

MTEEngine Method: tag

Creates a template for a HTML-tag.

Syntax:

engine.tag(tag, [context,] [properties,] [content, ...])

Arguments:

  • tag - (string) The tag name for the underlying element
  • context - (context expression, optional) A context expression which sets the data source of the current template from the incoming/parents data source
  • properties - (object, optional) The properties for the underlying element. The properties may contain binding expression.
  • content - (mixed, optional) The content of the template can be any of the following:
    • binding - (binding expression) a binding expression which denotes a binding to a specific property. See method bind.
    • template - (template) a child template.
    • text - (string) textual content.

Returns:

  • (MTETemplate) A template object which can be used to render elements

Notes:

A shortcut function exists for all the regular HTML-tags. For example can engine.div(...) be used instead of engine.tag('div', ...).

MTEEngine Method: bind

Creates a binding expression which binds the rendered elements of a template to a property on the data source.

Syntax:

engine.bind([properties,] [formatter])
engine.B([properties,] [formatter])

Arguments:

  • properties - (string, array of strings) A property to bind to or an array of properties to bind to.
  • formatter - (function) A function which takes a data object as input and returns an element or string.

MTEEngine Method: context

Create a context expression which can be used to set the data source of a template

Syntax:

engine.context(property)
engine.C(property)

Arguments:

  • property - (string) The property to set as data source.

MTEEngine Method: list

Creates a list binding expression which binds the rendered elements to an iterable property on the data source.

Syntax:

engine.list(property [, sortProperty])
engine.L(property [, sortProperty])

Arguments:

  • property - (string) A property to bind to. The bound property should contain an iterable data source.
  • sortProperty - (string) A property on the child object which should be used to sort the rendered elments.

MTEEngine Method: display

Creates a binding expression which binds the CSS display property of the parent element to one or more properties on the data source.

Syntax:

engine.display([properties,] [formatter])
engine.D([properties,] [formatter])

Arguments:

  • properties - (string, array of strings) A property to bind to or an array of properties to bind to.
  • formatter - (function) A function which takes data objects as input and returns a boolean value.

Class: MTETemplate

The MTETemplate is the acctual template.

MTETemplate Method: render

Render the template to an element.

Syntax:

template.render(dataSource)

Arguments:

  • dataSource - (mixed) The data source which will be used for data binding

Returns:

  • (Element) The rendered element

Class: MTEObservableObject

A base class/interface for observable models.

MTEObservableObject Method: get

Get the value of a property on the object.

Syntax:

observableObject.get(property)

Arguments:

  • property - (string) The property to get

Returns:

  • (mixed) The value of the propety

MTEObservableObject Method: set

Set the value of a property on the object.

Syntax:

observableObject.set(property, value)

Arguments:

  • property - (string) The property to set
  • value - (mixed) The value of the property

MTEObservableObject Method: remove

Removes a property/key from the object.

Syntax:

observableObject.remove(property)

Arguments:

  • property - (string) The property/key to remove

MTEObservableObject Method: update

Update/merge the object with another object.

Syntax:

observableObject.update(object [, remove])

Arguments:

  • object - (object) The updating object which is merged into the current observable object
  • remove - (boolean) If objects not present in the first parameter (object) should be removed from this object.

MTEObservableObject Method: listenChange

Registers an event handler that listens for changed on a specific property on the object.

Syntax:

observableObject.listenChange(property, eventHandler [, initTrigger])

Arguments:

  • property - (string) The property to listen for changed on.
  • eventHandler - (function) The function to call when the property changes. The function takes the following arguments:
    • source - (mixed) The object which contains the property that have changed.
    • property - (string) The name of the property that have changed.
    • value - (mixed) The new value of the property.
    • oldValue - (mixed) The old value of the property.
  • initTrigger - (boolean, optional) Whenever to call the event handler upon registration or not.

MTEObservableObject Method: listenChanges

Registers an event handler that listens for any changes on the object.

Syntax:

observableObject.listenChanges(eventHandler [, initTrigger])

Arguments:

  • eventHandler - (function) The function to be call when any property changes. The function takes the following arguments:
    • source - (mixed) The object which contains the property that have changed.
    • property - (string) The name of the property that have changed.
    • value - (mixed) The new value of the property.
    • oldValue - (mixed) The old value of the property.
  • initTrigger - (boolean, optional) Whenever to call the event handler upon registration or not.

MTEObservableObject Method: triggerChange

Trigger a change event on a specific property on the object.

Syntax:

observableObject.triggerChange(property, value)

Arguments:

  • property - (string) The property that have changed.
  • value - (mixed) The new value of the property.

MTEObservableObject Method: ignoreChange

Unregisters an event handler that listens for changed on a specific property on the object.

Syntax:

observableObject.ignoreChange(property, eventHandler)

Arguments:

  • property - (string) The property to stop listening on changes for.
  • eventHandler - (function) The function to unregister.

MTEObservableObject Method: ignoreChanges

Unregisters an event handler that listens for any changes on the object.

Syntax:

observableObject.ignoreChanges(peventHandler)

Arguments:

  • eventHandler - (function) The function to unregister.

Class: MTEEngine.Markup

An extended version of MTEEngine which has additional methods for creating templates from HTML markup.

MTEEngine.Markup Syntax

The templates created with the MTE markup notation should use the following notation:

	<tag id="templateId">
		<tag data-context="contextProperty"></tag>
		<tag data-bind="propA, propB" data-formatter="myFormatter"></tag>
		<tag>
			Property1: <span data-bind="property1"/>
			Property2: <span data-bind="property2"/>
		</tag>	
		<tag data-list="arrayProperty">
			<tag data-bind="property1OnObjectInArray"></tag>	
		</tag>	
		<tag data-display="visibilityProperty">
			Something that is hidden when the visibilityProperty is false.
		</tag>
		<tag data-bind-attribute="contextProperty"></tag>		
	</tag>

The markup is regular HTML (valid HTML5) which makes use of custom html attributes. The custom attributes are data-bind, data-context, data-list, data-bind-<attribute>, data-display and data-formatter which may be used in the same way as MTEEngine.bind, MTEEngine.context, MTEEngine.list, MTEEngine.display and formatters.

MTEEngine.Markup Method: load

Load templates from a remote resource.

Syntax:

engine.load(url, formatters, callback)

Arguments:

  • url - (string) The url of the templates to load.
  • formatters - (object) A map with formatters that the templates may refer to.
  • callback - (function) The function to be called when the templates have been loaded. The callback function should handle the following arguments:
    • templates - (object) A map with templates, where the key is the template id.

MTEEngine.Markup Method: fromMarkup

Creates templates from markup

Syntax:

var templates = engine.fromMarkup(markup, formatters)

Arguments:

  • markup - (string) The markup with templates to analyze.
  • formatters - (object) A map with formatters which may be referred to from the templates.

Returns:

  • templates - (object) An object with templates as values and template ids/names as keys.

MTEEngine.Markup Method: fromElements

Creates templates from a list of DOM elements created with MTE markup notation.

Syntax:

var templates = engine.fromElements(elements, formatters)

Arguments:

  • elements - (mixed) A list of elements with MTE markup syntax.
  • formatters - (object) A map with formatters which may be referred to from the templates.

Returns:

  • templates - (mixed) A map with templates as values and template ids as keys.

MTEEngine.Markup Method: fromElement

Creates a template from a DOM element with MTE markup notation.

Syntax:

var template = engine.fromElement(element, formatters)

Arguments:

  • element - (element) An element with MTE markup notation.
  • formatters - (object) A map with formatters which may be referred to from the template.

Returns:

  • template - (MTETemplate) A template.