Discussion on: Components switching with DML

[Eckehard]

Very nice example.

For a larger setup it could be helpful to create a Navbar class and put all the functions together there. This will make the Navbar a reusable component.

    // A navbar component class
    function Navbar() { return new _Navbar() }
    class _Navbar {
      constructor() {  // Build an empty div as container
        this.navbar = div('', cssNavbar)
      }
      setTarget(main) {  // attach a content-container
        this.main = main
      }
      addItem(title, route) { // add a new router button
        selectBase(this.navbar)
        button(title, cssButton).onclick = () => this.setRoute(route);
        unselectBase()
      }
      setRoute(component) {  // replace the content
        while (this.main.firstChild)
          this.main.removeChild(this.main.firstChild);
        selectBase(this.main)
        component()  // Create content dynamically
        unselectBase()
      }
    }

    // Create elements
    let nav = Navbar();
    nav.addItem("Home", Home)
    nav.addItem("Canvas", Tree)
    nav.addItem("Counter", Counter)

    nav.setTarget(div('', cssContainer));
    nav.setRoute(Tree)

There is one little disadvantage in the setup: the "component()" content is created any time the user hit´s a button. This may cause delay for larger content (e.g. a larger Tree) and will reset the state of your panel any time your are switching. And - if the components are not deleted - it may cause a memory leak. After removing elements from the DOM you need to manually delete them (el = Null).

But it is far better to keep the "prerendered" components instead, and make them just not visible. You just need to remove the element from the DOM after creation:

function Navbar() { return new _Navbar() }
    class _Navbar {
      constructor() {
        this.navbar = div('', cssNavbar)
        this.components = {}
      }

      // Set target element
      setTarget(main) {
        this.main = main
      }

      // Add new item to the Navbar
      addItem(title, component) {

        // Create button
        selectBase(this.navbar)
        button(title, cssButton).onclick = () => this.setRoute(component);
        unselectBase()

        // Create content
        let myDiv = selectBase(div())       // create div as a container  
        component()                         // Create content in myDiv
        unselectBase()
        myDiv.parentNode.removeChild(myDiv) // Remove container from the DOM
        this.components[component] = myDiv  // Save container "with content" in **components**
      }

      // Change the content of target element
      setRoute(component) {
        if (this.main.firstChild)
          this.main.replaceChild(this.components[component], this.main.firstChild)
        else
          this.main.append(this.components[component])
      }

    }

Now you just switch your working "components" instead of calling component() again. This will preserve the state of the individual components while switching and ist much faster.

[artydev]

Thank you very Eckehard
Using Class is indeed a nice way to create complex compone nt
I must use them a little more
The like very much the idea of prerendering components to preserve states
Thanks again
Regard

[Eckehard]

Classes are not that hard to use. Making code reusable is always a bit harder, but as you see, there is a natural transistion for procedural code to class based code. In fact, it´s a common practice to start with procedural code and create the classes later. You often will see some global definitions that prevent your code from being reused easily. That´s a good point to start rebuilding your app.