Mustache Replacement - View Working Example

Values from a Javascript model can be inserted into an HTML string with the use of the Mustache syntax. Once values are inserted, then the string is converted to a document fragment and returned if using the Fill function. Using the FillHTML function will return the HTML string with the replacements. Mustache replacement is not reactive to the original model.

HTML

            <div>{{message}}</div>
        

Javascript

            let data = { message: 'Hello, Modstache!' };

            // There are several ways to replace the HTML Mustache values
            let modifiedHTML = Modstache.fillHTML(html, data); // returns the modified HTML string
            let modifiedHTML = _M_.fillHTML(html, data);       // Short name access to Modstache
            let modifiedFragment = Modstache.fill(html, data); // returns a document fragment
        

Modified HTML

            <div>Hello, Modstache!</div>
        

Inserting Script

Replaced values are converted to HTML. This can disable inserted script blocks. The HTML conversion can be disabled by setting the "escape" option to false..

HTML

            <div>{{htmlWithScript}}</div>
        

Javascript

            let data = { 
                htmlWithScript: 'Alert script is inserted and executed here<script>alert("Modstache is awesome!!");<\/script>'
            };
            let modifiedWithScript = Modstache.fillHTML(html, data, { escape: false });
        

Modified HTML

            <div>Alert script is inserted and executed here<script>alert("Modstache is awesome!!");</script></div>