Mirror of forum.nim-lang.org

5821 :: How to properly append/replace DOM elements using just karax

• NerdRat (orginal) [2020-01-16T23:17:52+01:00] view original

  I am fairly new using karax. Playing with it, I tried to make elements spawn by clicking a button. The following approach works fine but it throws an exception ruining other karax components.

  type
      Selector = ref object
          selected: kstring
  
  ...
  
  proc onClickButton(e: Event, n: VNode, state: Selector) =
      var newElement = document.createElement(state.selected)
      var container = document.getElementById("elementContainer")
      newElement.id = state.selected & "-element"
      container.replaceChild(newElement, container.firstChild)
  Run

  This works as expected, but it throws the following exeption leaving karax unstable:

  Error: Error: unhandled exception: /home/pit/.nimble/pkgs/karax-1.1.0/karax/karax.nim(620, 14) `same(kxi.currentTree, document.getElementById(kxi.rootId))`
  Traceback (most recent call last)
  redraw.:anonymous, line: 659
  karax.dodraw, line: 620
  assertions.failedAssertImpl, line: 27
  assertions.raiseAssert, line: 20
  sysFatal.sysFatal, line: 39

  The previous approach didn't convince me so i tried using karax only functions (showing my karax noobness):

  proc onClickButton(e: Event, n: VNode, state: Selector) =
      var nel = tree(parseEnum[VNodeKind]($state.selected))
      nel.setAttr("id", state.selected & "-element")
      var cont = getVNodeById("elementContainer")
      cont.delete(0)
      cont.add(nel)
      redrawSync()
  Run

  Which didn't work at all.

  I also tried using the following renderer with no results:

  proc renderElement(e: kstring): VNode =
      var element = tree(parseEnum[VNodeKind]($e))
      element.setAttr("id", e & "-element")
      result = buildHtml(tdiv):
          element
  ...
  
  proc render*(selector: Selector): VNode =
      result = buildHtml(tdiv):
          h1(text "Select an element, then press Create")
          renderSelectorList(selector)
          renderButton("Create", selector)
          tdiv(id="elementContainer", text "Placeholder"):
              if selector.selected.len == 0:
                  text "Placeholder"
              else:
                  renderElement selector.selected
  Run

  Is there a proper approach to append/replace elements using just karax?

---

• kidandcat (orginal) [2020-01-17T09:05:38+01:00] view original

  You have an example in the repo's Readme: https://github.com/pragmagic/karax#event-model

  Basically use for

---

• NerdRat (orginal) [2020-01-17T16:17:20+01:00] view original

  Couldn't render post #36125.

---

• NerdRat (orginal) [2020-01-24T05:47:07+01:00] view original

  I have solved the issue the karax way, to produce a new element and get it render, I created each element using VNodeKind, to make the button "create" the new element, I simply save the previously selected option VNodeKind and createt with newVNode, wrapped in buildHtml():

  var
      prev: VNodeKind
      selected: VNodeKind
  
  proc renderElementList*: VNode =
      result = buildHtml(tdiv):
          select(id="selector"):
              proc onchange(e: Event, n: VNode) =
                  prev = parseEnum[VNodeKind]($n.value)
              for element in low(VNodeKind) .. high(VNodeKind):
                  option(value = $element):
                      text $element
  
  proc renderElement*(kind: VNodeKind): VNode =
      result = buildHtml(newVNode(kind))
  
  proc renderCreator*: VNode =
      result = buildHtml(tdiv):
          renderElementList()
          button:
              text "Create"
              proc onclick(e: Event, n: VNode) =
                  selected = prev
                  echo $selected, " created"
              button:
                  text "Edit"
                  proc onclick(e: Event, n: VNode) =
                      echo "Editing ", $selected
              tdiv:
                  renderElement(selected)
  Run

  This solution is not genius but it does the job.

---