Dynamic Nodes
Dynamic Nodes
The traditional way, is you assign display:none
to style attributes or use css. With Dynamic Nodes, we go a step further by adding and removing the nodes completely from the DOM. To use it wrap your html template literals with comment tags i.e
<!-- {{?<state>}} --><node_1><node_2><node_3><!-- {{/<state>}} -->
Add a new property state with boolean value to the class constructor
NOTE: DOM add/removal is fast and free up your resources when you do not need these nodes.
import Keet, { html } from 'keet'
class App extends Keet {
el = 'app'
show = false
toggle() {
this.show = !this.show
}
render() {
return html`
<button id="toggle" k-click="toggle()">toggle</button>
<div id="1">one</div>
<!-- {{?show}} -->
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<!-- {{/show}} -->
<div id="5">five</div>
`
}
}
const app = new App()
Codepen Sample
See the Pen Keetjs - Dynamic Nodes by Shahrul Nizam b. Selamat (@syarul) on CodePen.