Not clear how to use state API with an object #17
-
|
Sorry if I missed it in docs. <!doctype html>
<html>
<head>
</head>
<body>
<script type="module">
import * as van from 'https://vanjs.org/code/van-0.11.0.js'
const { button, span } = van.tags
class Counter {
constructor() {
this.state = van.state({
amount: 0
})
}
onIncrementButtonClickFactory(self) {
return (event) => {
console.log(event)
self.state.amount += 1
}
}
onDecrementButtonClickFactory(self) {
return (event) => {
console.log(event)
self.state.amount -= 1
}
}
render() {
const incrementButtonOnClick = this.onIncrementButtonClickFactory(this)
const derementButtonOnClick = this.onDecrementButtonClickFactory(this)
const incrementButton = button({ onclick: incrementButtonOnClick }, "👍")
const decrementButton = button({ onclick: derementButtonOnClick }, "👎")
return span(`❤️ ${this.state.amount} `, incrementButton, decrementButton)
}
}
window.addEventListener('load', function () {
const node = document.body
const counter = new Counter()
van.add(node, counter.render())
})
</script>
</body>
</html>I was trying to teach my friend who doesn't know programming how to use a really cool lightweight library like this while showing him basic concepts of HTML/JavaScript/ES6/frontend development. I couldn't discern from the docs how to make this work. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
Hey Brandonros, Look at this discussion VanJSIntro Best Regards |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @artydev! I was about to write an answer to this question and saw you already have it answered pretty well. Here are things I would like to add: For @brandonros's sample program, a more idiomatic way to define a root-level state is to have a JS object with VanJS states as its fields, rather than having a VanJS state with JS object as its value. Doing so can generally lead to performance improvement, making your app more "Reactive". It will also make the code to construct DOM tree more ergonomics. In other words, instead of having: this.state = van.state({
amount: 0
})It's more recommended to have: this.state = {
amount: van.state(0)
}Based on this style I have modified your program to make it work, see it here: https://jsfiddle.net/ptox6ws1/7/ btw: I saw you're using the VanJS version 0.11.0 in your program. The latest version of VanJS is 0.11.10 as of now. While theoretically 0.11.0 should work but this is a development version (created before we publicly released VanJS) thus we have relatively weaker guarantee on its reliability. |
Beta Was this translation helpful? Give feedback.
-
|
And alast Not the recommanded one :-) import van from 'https://vanjs.org/code/van-0.11.9.min.js'
const { div, button, input } = van.tags;
const State = van.state({
point : 89,
name: "Hal"
});
let actions = ((state) => {
const val = state.val
return ({
inc : () => state.val = {...val, point : ++val.point }
})
})(State);
function App (stateval) {
let s = stateval
const view = div (
div(s.name),
div(s.point),
button({onclick : actions.inc }, "inc")
)
return view;
}
van.add(document.body, van.bind(State, App)); |
Beta Was this translation helpful? Give feedback.
-
<!doctype html>
<html>
<head>
</head>
<body>
<script type="module">
import van from 'https://vanjs.org/code/van-0.11.9.js'
const { button, span } = van.tags
class Counter {
constructor() {
this.state = van.state({
amount: 0
})
}
onIncrementButtonClickFactory(self) {
return (event) => {
console.log(event)
const oldState = self.state.val
const newAmount = oldState.amount + 1
self.state.val = {
...oldState,
['amount']: newAmount
}
}
}
onDecrementButtonClickFactory(self) {
return (event) => {
console.log(event)
const oldState = self.state.val
const newAmount = oldState.amount - 1
self.state.val = {
...oldState,
['amount']: newAmount
}
}
}
render() {
const incrementButtonOnClick = this.onIncrementButtonClickFactory(this)
const derementButtonOnClick = this.onDecrementButtonClickFactory(this)
const incrementButton = button({ onclick: incrementButtonOnClick }, "👍")
const decrementButton = button({ onclick: derementButtonOnClick }, "👎")
return van.bind(this.state, (state) => {
return span(`❤️ ${state.amount} `, incrementButton, decrementButton)
})
}
}
window.addEventListener('load', function () {
const node = document.body
const counter = new Counter()
van.add(node, counter.render())
})
</script>
</body>
</html>I was missing |
Beta Was this translation helpful? Give feedback.
-
|
But try to follow Tao advise :-) const { button, span } = van.tags
class Counter {
constructor() {
this.state = {
amount: van.state(0)
}
}
onIncrementButtonClickFactory(self) {
return (event) => {
console.log(event)
self.state.amount.val += 1
}
}
onDecrementButtonClickFactory(self) {
return (event) => {
console.log(event)
self.state.amount.val -= 1
}
}
render() {
const incrementButtonOnClick = this.onIncrementButtonClickFactory(this)
const derementButtonOnClick = this.onDecrementButtonClickFactory(this)
const incrementButton = button({ onclick: incrementButtonOnClick }, "👍")
const decrementButton = button({ onclick: derementButtonOnClick }, "👎")
return span("❤️ ", this.state.amount, " ", incrementButton, decrementButton)
}
}
window.addEventListener('load', function () {
const node = document.body
const counter = new Counter()
van.add(node, counter.render())
}) |
Beta Was this translation helpful? Give feedback.
But try to follow Tao advise :-)