Mirror of forum.nim-lang.org

5219 :: Newbie Karax Question

• Phillips126 (orginal) [2019-09-24T21:07:05+02:00] view original

  I'm learning Karax (for fun) and seem to be having an issue with text updating - most likely I am doing something wrong.

  My main app.nim is simply:

  include karax/prelude
  
  import components/header
  
  proc main() =
    proc render(): VNode =
      buildHtml:
        tdiv:
          renderHeader()
    
    setRenderer render
  
  when isMainModule:
    main()
  Run

  The header.nim file is:

  import sugar, times
  include karax/prelude
  from dom import setTimeout
  
  const dateTimeFormat = "dddd, MMMM, d, YYYY - h:mm:ss tt"
  var datetime: kstring = ""
  
  proc dateTimeUpdate() =
    datetime = format(now(), dateTimeFormat)
    echo "update time - " & datetime  # <-- This is showing up correctly in the browsers console
    discard dom.window.setTimeout(dateTimeUpdate, 1000)
  
  dateTimeUpdate()
  
  proc renderHeader*(): VNode =
    buildHtml:
      tdiv:
        h1(text datetime)  # <-- This isn't updating on its own
        button(text="Hello", onclick = () => (echo datetime)):   # <-- Clicking this unrelated button causes the DOM to update
          text "Hello Button"
  Run

  The dateTimeUpdate() proc does seem to be updating the datetime value as per the web console:

  
  update time - Tuesday, September, 24, 2019 - 3:00:10 PM
  update time - Tuesday, September, 24, 2019 - 3:00:11 PM
  update time - Tuesday, September, 24, 2019 - 3:00:12 PM
  update time - Tuesday, September, 24, 2019 - 3:00:13 PM
  update time - Tuesday, September, 24, 2019 - 3:00:14 PM
  ...
  Run

  I'm expecting the h1 element to update every second with a new formatted datetime, however, it doesn't seem to update on it's own. When I click the button, it does update the DOM. Are all DOM updates tied to events such that the datetime value wont update on its own?

---

• dom96 (orginal) [2019-09-24T23:13:21+02:00] view original

  Are all DOM updates tied to events such that the datetime value wont update on its own?

  Yep, you need to ask Karax to refresh in your dateTimeUpdate. Afaik you can just call redraw to do that.

---

• Phillips126 (orginal) [2019-09-25T14:30:43+02:00] view original

  Ah perfect, I was not aware of the redraw call.

  Thank you!

---