Templates API

#$

Entry point into the fluent template builder API

The API to the fluent object is dynamic and can't be documented as a typical API interface.

See the (Fluent Templates](templateFluent) for how to use this API.

let $: any;

#compileTemplate()

Compiles a template into a DomTreeConstructor function.

Usually templates are automatically compiled by Components and this function isn't used directly. For more information, see Template Internals.

function compileTemplate(rootTemplate: object): DomTreeConstructor;

• rootTemplate The template to be compiled

#html()

Marks a string as being raw HTML instead of plain text

Normally strings passed to templates are treated as plain text. Wrapping a value by calling this function indicates the string should be treated as raw HTML instead.

See Text and HTML for more information.

function html(html: string | ((...args: any[]) => string)): HtmlString;

• html The HTML value to be wrapped, or a function that returns a string

#input()

Declares additional settings for bi-direction input field binding.

See InputOptions for available options.

See Input Bindings for more information.

function input(options: InputOptions): object;

• options Additional input options

#InputOptions

Options for controlling input bindings.

If the get and set handlers are specified they override both target and prop which are no longer used.

type InputOptions = {
    event: string;
    prop?: string;
    target?: string | ((model: object) => string);
    format?: (value: any) => string;
    parse?: (value: string) => any;
    get?: (model: any, context: any) => any;
    set?: (model: any, value: any, context: any) => void;
    on_change?: (model: any, event: Event) => any;
};

#event

The name of the event (usually "change" or "input") to trigger the input binding. If not specified, "input" is used.

event: string;

#format

Format the property value into a string for display.

format?: (value: any) => string;

#get

Get the value of the property.

get?: (model: any, context: any) => any;

#on_change

A callback to be invoked when the property value is changed by the user.

on_change?: (model: any, event: Event) => any;

#parse

Parse a display string into a property value.

parse?: (value: string) => any;

#prop

The name of the property on the target object.

prop?: string;

#set

Set the value of the property.

set?: (model: any, value: any, context: any) => void;

#target

The target object providing the binding property. If not specified, the template's model object is used.

target?: string | ((model: object) => string);

#transition()

Declares addition settings transition directives

function transition(...options: any[]): {
    (...args: any[]): any;
    withTransition(context: any): any;
};

• options

#TransitionOptions

Options for controlling behaviour of transitions.

See Transition Options for more information.

type TransitionOptions = {
    value: (model: object, context: object) => any;
    mode?: string;
    name?: void;
    classNames?: object;
    duration?: number;
    subtree?: boolean;
};

#classNames

A map of class name mappings.

classNames?: object;

#duration

The duration of the animation in milliseconds.

duration?: number;

#mode

Transition order - "concurrent", "enter-leave" or "leave-enter"

mode?: string;

#name

Transition name - used as prefix to CSS class names, default = "tx"

name?: void;

#subtree

Whether to monitor the element's sub-trees for animations.

subtree?: boolean;

#value

The value callback that triggers the animation when it changes

value: (model: object, context: object) => any;