Closed woyodb closed 5 months ago
Please look at this section of the documentation: https://hybrids.js.org/#/component-model/templates?id=limitations
This is a platform (basically some of the browser implementation) limitation, that template engine cannot use it's internal way to mark place where the expression should be putted.
In short, you cannot use:
html`<th>BBB_${it}</th>`
You must write:
html`<th>${`BBB_${it}`}</th>`
The difference here is that whole content of the <th>
element is an expression, which contains a string value.
BTW, to avoid making a set/get property with default value of an array (in v9 it will be possible by value
option) you may try this pattern:
items: undefined,
render: ({ items = [1,2] }) => html`...`,
I have changed my codes as you mentioned limitation section, but, still have a confused problem:
<table>
<thead>
<tr>
${html`<th>AAA</th>`}
${items && items.map(it=>html`
<th>${`BBB_${it}`}</th>
`)}
</tr>
</thead>
<tbody>
<tr>
${html`<td>aaa</td>`}
${items.map(it=>html`
<td>${`bbb_${it}`}</td>
`)}
</tr>
</tbody>
</table>
The `AAA' column is rendered fine, but 'td' parts only show the 'aaa', the other 'td' are missing.
I've removed the whitespaces between tr tag, just not work, pls help.
I got it. the problem this the tbody still have tr tag not included in a html`` function, so change to following will work:
<tbody>
${html`
<tr>
${html`<td>aaa</td>`}
${items.map(it=>html`
<td>${`bbb_${it}`}</td>
`)}
</tr>
`}
</tbody>
Everything works fine now, except a little verbose. 😁
You can avoid one of the ${}
:
html`
<tr>
${html`
<td>aaa</td>
${items.map(it=>html`<td>${`bbb_${it}`}</td>`)}
`}
</tr>
`
I wish it could be simpler, but nowadays I strongly suggest using CSS Grid over tables - they have so many limitations.
Feel free to re-open if you have other issues with the subject.
Hi, I am trying to render a table with some dynamic columns, but encountered a problem: The columns does not render at all.
If I remove the column, the dynamic columns will rendered.
The full demo code is here :
Please help me to get through this . Thanks...
My local verion is v8.2.11