Stache Attribute - View Working Example

The stache attribute "{}" can be added to HTML markup to specify the model to DOM mapping. This mapping is reactive by default, meaning that changes to the model also modify the DOM. The stache attribute name can be changed by setting the "stache" option to the new name.

The stache attribute value is formatted as the the element attribute or property to modify followed by a colon, ":", followed by the model property. Multiple model values can be used by separating them with a semi-colon, ";". This is similar to setting a style in syntax. The model value can be used alone as a shortcut to modify the text of the element or if an object is used to specify the attributes and properties. For example, {}="name;color:style.color" will assign the model name as the text content of the element and the model color as style.color.

The following example populates a name and address from a model. This example just fills in the text so the element property doesn't need to be specified. The removeStache option removes the stache attribute when filling in the values.

Filling in an address

HTML

        <div id="address">
            <b>Name:</b> <span {}="name"></span><br />
            <b>Address:</b> <span {}="address"></span><br />
            <b>City:</b> <span {}="city"></span>, <span {}="state"></span> <b>Zipcode:</b> <span {}="zipcode"></span>
        </div>
    

Javascript

        let address = {
            name: 'John',
            address: '1234 Maple',
            city: 'Phoenix',
            state: 'AZ',
            zipcode: '85000'
        };

        let addressFragment = _M_.fill(document.getElementById('address'), address, { removeStache: true });
    

Modified HTML

        <div id="address">
            <b>Name:</b> <span>John</span><br>
            <b>Address:</b> <span>1234 Maple</span><br>
            <b>City:</b> <span>Phoenix</span>, <span>AZ</span> <b>Zipcode:</b> <span>85000</span>
        </div>
    

Let's modify the example to change the styling of the name to bold and lime in color. There are two ways to specify this in the model and stache property. The first method is to modify the name in the model to an object. This allows multiple element properties or attributes to be modified with a single reference to the model. For this method, the name in the model is set as follows with no changes to the stache attribute. The new name object must have properties that match the names of the ones to modify in the target element, unless the translate option is specified:

        let address = {
            name: { textContent:'John', style:'font-weight:bold;color:lime' },
            address: '1234 Maple',
            city: 'Phoenix',
            state: 'AZ',
            zipcode: '85000'
        };
    

The second method is to modify both the model and the stache attribute. For this method, the name in the model is set as shown below and the stache element for the name span is set to {}="name;style:nameStyle". This method doesn't require that the object names match the element property names and translate is not necessary.

        let address = {
            name: 'John',
            nameStyle: 'font-weight:bold;color:lime',
            address: '1234 Maple',
            city: 'Phoenix',
            state: 'AZ',
            zipcode: '85000'
        };
    

Modified HTML with stache attribute included

HTML

    <div id="address">
    <b>Name:</b> <span {}="name;style:nameStyle" style="font-weight: bold; color: lime;">John</span><br>
    <b>Address:</b> <span {}="address">1234 Maple</span><br>
    <b>City:</b> <span {}="city">Phoenix</span>, <span {}="state">AZ</span> <b>Zipcode:</b> <span {}="zipcode">85000</span>
    </div>