Updating UI

[artydev]

Hy Tao,

Thank you for your awesome framework.
I really love it and hope It will have the sucess it deserves.

I have a question about state.

How could I update the UI when passing an object to a state ? :

ObjectState

const {button, div} = van.tags

// Create a new State object with init value 1
const counter = van.state({
  count : 0
})

const viewcounter = div(counter.val.count)

const incrementBtn = button({onclick: () => ++counter.val.count}, "Increment")


function App () {
  const dom = div
  return dom (
    viewcounter,
    incrementBtn
  )
}

van.add(document.body, App())

I have managed this way, can you tell me if there is something wrong ? , thank you

StateObject

import van from 'https://vanjs.org/code/van-0.11.9.min.js'

const { div, button, input, "m-c": MC} = van.tags;

const counter = van.state({
  point : 89,
  name: "Hal"
})


function incCounter (s) {
  counter.val = {...counter.val, point : ++s.point }
}

function App (stateval) {
  let s = stateval
  const dom = div
  const view = dom (
     div(s.name),
     input({placeholder: "input..."}),
     div(s.point),
     button({onclick : () => incCounter(s)}, "inc")
  )
  return view
}

van.add(document.body, van.bind(counter, (stateval) => App(stateval)))

Regards

[Tao-VanJS]

Hi,

Thanks for reaching out! Only primitive-valued state objects can be used as the child node of tag functions. You can refer to the API reference: https://vanjs.org/tutorial#api-tags.

Object-typed state objects can be bound to DOM node via complex binding (van.bind), which is why your second implementation is right. See https://vanjs.org/tutorial#complex-state-binding.

Hope it helps!

btw: in your example, it's more efficient to use 2 primitive-typed states instead of 1 object-typed state.

[Tao-VanJS]

btw: you can also consider using van-{VERSION}.debug.js for debugging. This will give you more meaningful error messages if things go wrong.

[artydev]

Thank you very much Tao :-)