This is a prerelease version of FAST (3.0.0-rc.1).

@microsoft/fast-element > ViewTemplate

ViewTemplate class

A template capable of creating HTMLView instances or rendering directly to DOM.

Signature:

export declare class ViewTemplate<TSource = any, TParent = any> implements ElementViewTemplate<TSource, TParent>, SyntheticViewTemplate<TSource, TParent>

Implements: ElementViewTemplate<TSource, TParent>, SyntheticViewTemplate<TSource, TParent>

Constructors

Constructor

Modifiers

Description

(constructor)(html, factories, policy)

Creates an instance of ViewTemplate.

Properties

Property

Modifiers

Type

Description

factories

readonly

Record<string, ViewBehaviorFactory>

The directives that will be connected to placeholders in the html.

html

readonly

string | HTMLTemplateElement

The html representing what this template will instantiate, including placeholders for directives.

Methods

Method

Modifiers

Description

create(hostBindingTarget)

Creates an HTMLView instance based on this template definition.

create(strings, values, policy)

static

Processes the tagged template literal's static strings and interpolated values and creates a ViewTemplate.

For each interpolated value: 1. Functions (binding expressions, e.g., x => x.name) → wrapped in a one-way HTMLBindingDirective 2. Binding instances → wrapped in an HTMLBindingDirective 3. HTMLDirective instances → used as-is 4. Static values (strings, numbers) → wrapped in a one-time HTMLBindingDirective

Each directive's createHTML() is called with an add callback that registers the factory in the factories record under a unique ID and returns that ID. The directive inserts a placeholder marker (e.g., fast-abc123{0}fast-abc123) into the HTML string so the compiler can later find and associate it with the factory.

Aspect detection happens here too: the lastAttributeNameRegex checks whether the placeholder appears inside an attribute value, and if so, assignAspect() sets the correct DOMAspect (attribute, property, event, etc.) based on the attribute name prefix.

inline()

Returns a directive that can inline the template.

render(source, host, hostBindingTarget)

Creates an HTMLView from this template, binds it to the source, and then appends it to the host.

withPolicy(policy)

Sets the DOMPolicy for this template.