V7 Template Literal compile error

Questions
1

I am updating my App from v5 to v7 and converting my Template7 templates to Template literals. I have most of it working but I am perplexed by an issue with part of my template literal. It compiles the html as text, not actual html.

The template uses an external json file. The code uses the json data to either show a select dropdown list or just some text depending on if an array is present in the json or not.
It should compile the select input with options if this array is is present–> "concSelect":
The json structure is like this:

[
  {
    "concentration": "50",
    "appendvol": "ml",
    "doseper": "10",
    "calcID": "Amikacin2",
    "dosemax": "30",
    "color": "green",
    "dosemin": "10",
    "hide": "",
    "perkg": "mg/kg",
    "appendose": "mg",
    "dosestep": "1",
    "calc": "Amikacin",
    "decimal": "2",
    "name": "Amikacin",
    "perml": "mg/ml",
    "dosevalue": "10",
    "route": "IV,IM,SQ BID"
  },
  {
    "concentration": "",
    "class": "drug",
    "calcID": "Amoxicillin2",
    "dosemax": "22",
    "perml": "mg/ml",
    "perkg": "mg/kg",
    "name": "Amoxicillin",
    "decimal": "2",
    "doseper": "11",
    "dosemin": "11",
    "color": "green",
    "appendvol": " ",
    "hide": "",
    "appendose": "mg",
    "dosestep": "1",
    "calc": "Amoxicillin",
    "route": "BID",
    "concSelect": [
      {
        "name": "50mg/",
        "perml": "ml",
        "value": 50
      },
      {
        "name": "50mg",
        "perml": " tab",
        "value": 50
      },
      {
        "name": "100mg",
        "perml": " tab",
        "value": 100
      },
      {
        "name": "150mg",
        "perml": " tab",
        "value": 150
      }
    ],
    "dosevalue": "11"
  },

The template literal section that compiles as text is this:

${anesthetics.map((anesthetic) => $h`
...

<div class="inline-flex relative px-2 font-bold">
 ${anesthetic.concSelect ? `<form id="formSearchSelect-${anesthetic.calcID}" class="md:flex form-store-data relative  print:inline-flex"><select class="conc dark:text-white dark:bg-black form-select blocked transition duration-150 ease-in-out sm:text-sm sm:leading-5 font-bold print:px-1 print:pr-2 print:border-none print:shadow-none print:bg-white print:text-black" data-drugToChange=".input-${anesthetic.calcID}" name="select${anesthetic.calcID}">
${anesthetic.concSelect.map(conc => `<option  data-drugType="${conc.perml}" value=" ${conc.value}">${conc.name} ${conc.perml}</option>`).join('')}
  </select></form>` : `${anesthetic.concentration} ${anesthetic.perml}`}
</div>


...
`)}

If I don’t use the Framework7 method

 ${anesthetics.map((anesthetic) => $h`  `});

but use this

function drugTemplate(anesthetic) {
  return `
...

<div class="inline-flex relative px-2 font-bold">
 ${anesthetic.concSelect ? `<form id="formSearchSelect-${anesthetic.calcID}" class="md:flex form-store-data relative  print:inline-flex"><select class="conc dark:text-white dark:bg-black form-select blocked transition duration-150 ease-in-out sm:text-sm sm:leading-5 font-bold print:px-1 print:pr-2 print:border-none print:shadow-none print:bg-white print:text-black" data-drugToChange=".input-${anesthetic.calcID}" name="select${anesthetic.calcID}">
${anesthetic.concSelect.map(conc => `<option  data-drugType="${conc.perml}" value=" ${conc.value}">${conc.name} ${conc.perml}</option>`).join('')}
  </select></form>` : `${anesthetic.concentration} ${anesthetic.perml}`}
</div>


...
`}

`document.getElementById("anestheticsDrugs").innerHTML = `
${anesthetics.map(drugTemplate).join("")}
`;  `

it works as it should, compilng as expected.

Any help would be appreciated.
2

here => quiet-cdn-rklh1k - CodeSandbox

3

Nice, Thanks.
If I was just using a list, a smart select would be perfect but I need to use a separate Select input for the concentrations since I have a number of calculations with result Div’s I need for my app layout and a list is just not workable.
I won’t bore you with all the code but here is a screenshot of how it looks.

screen3
screen31280×1071 154 KB

4

although you can still use SS, it doesn’t really matter.
just make sure you use temp-literals correctly.

${anesthetics.map(anesthetic => $h`
  <div>
    ${anesthetic.concSelect ? $h`
    <form>
      <select>
      ${anesthetic.concSelect.map(conc => $h`
        <option>dummy</option>
      `)}
      </select>
    </form>
    ` : `${anesthetic.concentration} ${anesthetic.perml}` }
  </div>
`)}
5

I thought so. Thanks again for your help.

6

items in array should be identical (same props, same dataType).
make sure to include concSelect in every item (an empty one, when he has no items)

and SS doesn’t have to be a list, it can be (literally) anything.