Dynamic Mappings - View Working Example

A model value can return an object that maps members to element properties with the same name. This allows the modified element properties to be determined dynamically. The model object can use different names than the element property if a translation mapping is provided.

Dynamic Styling

The following example allows the user to select the styling of the text. Translate is used to map the object properties to the style.

HTML

        <div id="dynamicExample">
            <div>
                <div><input id="bold" type="checkbox" {}="onchange:bold" /><label for="bold">Bold Text</label></div>
                <div><input id="red" type="checkbox" {}="onchange:red" /><label for="red">Red Text</label></div>
            </div>
            <div style="margin-top:10px;">
                <div {}="styling">Sample Text</div>
            </div>
        </div>
    

Javascript

        let dynamicModel = {
            bold: ({ root }, e) => () => root.styling = (e.checked) ? { fontWeight: 'bold' } : { fontWeight: '' },
            red: ({ root }, e) => () => root.styling = (e.checked) ? { color: 'red' } : { color: 'black' },
            styling: {}
        };

        _M_.fill(document.getElementById('dynamicExample'), dynamicModel,
            { translate: { fontWeight: 'style.fontWeight', color: 'style.color' } });