sometimes text, sometimes nodes

[marcoscaceres]

I have the following situation.

const render = hyperHTML.bind(aHTMLTableElem);
const items = getItems(); // can be an empty list
renderer `${items.length ? toTR(items) : hyperHTML.wire()`<tr><td colspan="2">None</td></tr>`}
      `;
// Ignore that this will result in an array of arrays; I flatten those... 
function toTR(item) {
  return hyperHTML.wire(item)
  `
    <tr>
      <td>...test...</td>
      <td>...test...</td>
    </tr>
  `;
}

However, I can't get it to work :( The result is "[object HTMLTableRowElement]".

What's the right pattern to use here?

[WebReflection]

const render = hyperHTML.bind(aHTMLTableElem);
const items = getItems();
if (items.length) render`${toTR(items)}`;
else rendered`<tr><td colspan="2">None</td></tr>`;

would this work?

[marcoscaceres]

I guess I could split them. I have this in actual code:

    renderer `${lineItemsHTML.length ? lineItemsHTML : hyperHTML.wire()`<tr><td colspan="2">No line items</td></tr>`}
        <tr>
         <td colspan="2">Total:
           <output id="payment-sheet-total">${symbol}${value}</output> ${currency}</td>
        </tr>
      `;

So wasn't keen on splitting, because I'm combining multiple things.

[marcoscaceres]

(i.e., I still need to show the "total")

[WebReflection]

there is a space before the <tr> .... rule number 1 of hyperHTML: everything with something different from surrounding > and < will be text.

renderer `${
  lineItemsHTML.length ?
    lineItemsHTML :
    hyperHTML.wire()`<tr><td colspan="2">No line items</td></tr>`
}<tr>
  <td colspan="2">Total:
    <output id="payment-sheet-total">${symbol}${value}</output> ${currency}
  </td>
</tr>`;

Try again ?

[marcoscaceres]

/me tries

[marcoscaceres]

Woot! worky.