Rebinding

Bind once, then re-render the same template with new data.

Keep the instance and call bind() again. The template is only compiled once, so re-rendering costs nothing but the render itself.

<!-- Simply code your template into your page -->
<div id="app">
    <h1>#title#</h1>
    <ul>
    #for(let item of items) {#
        <li>#item#</li>
    #}#
    </ul>
    <button onclick="rebind();">Click to bind updated data</button>
</div>

<!-- Run Javascript to bind data to the page -->
<script src="https://cdn.jsdelivr.net/gh/richdafunk/hashJS@v1.3.6/hashJS.js"></script> 
<script>
    const data = {
        title: 'My HashJS title',
        items: ['Item 1', 'Item 2', 'Item 3']
    };

    var h = new hashJS("app");
    h.bind(data);
    
    function rebind() {
        data.title = "Updated title";
        data.items.push("Item 4");
        h.bind();
    }
</script>

Output result:

Compilation happens in the constructor. Every later bind() reuses that compiled function, which is what makes repeated updates cheap — you are not re-parsing the template each time.

Note that bind() with no argument re-renders using the data already held by the instance, so mutating that object and calling bind() is enough.