TemplateValueSchema (ui)

Describes a value of an HTML element attribute or textContent. It allows combining multiple data sources like static values and Observable attributes.

Also see:

• TemplateDefinition to learn where to use it,
• bind to learn how to configure Observable attribute bindings,
• render to learn how to render a template,
• to() and if() methods to learn more about bindings.

Attribute values can be described in many different ways:

// Bind helper will create bindings to attributes of the observable.
const bind = Template.bind( observable, emitter );

new Template( {
    tag: 'p',
    attributes: {
        // A plain string schema.
        'class': 'static-text',

        // An object schema, binds to the "foo" attribute of the
        // observable and follows its value.
        'class': bind.to( 'foo' ),

        // An array schema, combines the above.
        'class': [
            'static-text',
            bind.to( 'bar', () => { ... } ),

            // Bindings can also be conditional.
            bind.if( 'baz', 'class-when-baz-is-true' )
        ],

        // An array schema, with a custom namespace, e.g. useful for creating SVGs.
        'class': {
            ns: 'http://ns.url',
            value: [
                bind.if( 'baz', 'value-when-true' ),
                'static-text'
            ]
        },

        // An object schema, specific for styles.
        style: {
            color: 'red',
            backgroundColor: bind.to( 'qux', () => { ... } )
        }
    }
} );

Text nodes can also have complex values:

const bind = Template.bind( observable, emitter );

// Will render a "foo" text node.
new Template( {
    text: 'foo'
} );

// Will render a "static text: {observable.foo}" text node.
// The text of the node will be updated as the "foo" attribute changes.
new Template( {
    text: [
        'static text: ',
        bind.to( 'foo', () => { ... } )
    ]
} );