-
Notifications
You must be signed in to change notification settings - Fork 34
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conditional Rendering #6
Comments
There are no extra tags but yes this is possible in the expressions via plain JS. I put together an example here. const template = () => {
return html`
<div style=${style}>
Sinuous
${() =>
count() >= 3
? html`<b> count ${count}</b>`
: html`<b> cool</b>`
}
</div>
`;
}; |
Thanks! |
I modified the example with if and return statements and works too const template = () => {
return html`
<div style=${style}>
Sinuous
${() =>{
if (count() >= 3) {
return html`
<b> count ${count}</b>
`
} else {
return html`
<b> cool</b>
`
}
}
}
</div>
`; |
It is worth pointing out in all these cases that as count goes to 4, 5, 6, 7, 8 ... You will redoing the work and recreating that template over an over. For a simple case like this that is no problem, but if you have to be careful with conditions and possibly need to hoist the condition if you don't want the parent computed to run over and over. |
What does this look like with memoization? |
something like this would work https://codesandbox.io/s/thirsty-ptolemy-89qbi for this example that is definitely overkill I think and a simple hoist like @ryansolid suggested would be better. updated the demo with an example of this |
found a slightly cleaner solution that retains the locality: there might be an even better one, not sure. html`${when(
() => count() >= 3,
cond =>
cond
? console.log("render count") ||
html`
<b> count ${count}</b>
`
: console.log("render cool") ||
html`
<b> cool</b>
`
)}` const when = (condition, view) => {
const memoView = memo((...args) => root(() => view(...args)));
return () => memoView(condition());
}; |
To any future devs, this might be useful as well: #115 (comment) |
Does an ${if...} ${if...else} exist?
The text was updated successfully, but these errors were encountered: