Rebinding

Binding to ul / li list and then rebinding with new data.

<!-- 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.2.0/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:

#title#

    #for(let item of items) {#
  • #item#
  • #}#