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.

← PreviousNext →