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>
#title#
#for(let item of items) {#
- #item#
#}#