Как использовать переменные в _hyperscript js

Question

Мне нравится _hyperscript js, который я считаю очень многообещающим и забавным.

Теперь я пытаюсь понять использование переменных внутри простых команд. Предположим, у меня есть следующий код, сгенерированный сценарием PHP, который запрашивает дБ, а идентификаторы получают дБ (очень распространенный случай):

      <div id="1000">Mercedes</div>
<div id="1022">Audi</div>
<div id="1301">Ferrari</div>
<div id="1106">Lamborghini</div>

Чтобы добавить класс к конкретному, я обычно делал бы так:

      <button _="on click add .green to #1022" type="button">
    Click
</button>

Но что, если я не знаю idпотому что это результат запроса дБ? Как я могу разместить переменную с помощью _hyperscript и установить ее с помощью javascript? Что-то вроде этого:

      <button _="on click call setID() then add .green to ???" type="button">
    Click
</button>

<script type="text/javascript">
    function setID() {
        // here the code to get the ID 
        return id;
    }
</script>

Используя « символ » it прочитать результат последнего call возвращает ошибку:

      _="on click call setID() then add .green to it"

возвращается

      Uncaught TypeError: target.classList is undefined

Answer 1

Вы можете использовать строковые шаблоны внутри литералов запросов, поэтому должно работать что-то вроде этого:

      <button _="on click add .green to <#${getIdToAddTo()}/>" type="button">
    Click
</button>

где <.../> литерал запроса и ${getIdToAddTo()} является строковым шаблоном в этом запросе

Другой альтернативой было бы создание метода, который возвращает div для добавления к:

      <script>
  function divToAddTo() {
    return document.getElementById("whatever");
  }
</script>
<button _="on click add .green to divToAddTo()" type="button">
    Click
</button>