Используя hyperHTML, есть ли способ привязки непосредственно к элементу, который нужно изменить, а не к его родительскому элементу?

Question

Предполагая, что у меня есть следующее:

<div id="parent">
  <div id="child-one"><p>Child One</p></div>
  <div id="child-two"><p>Child Two</p></div>
  <div id="child-three"><p>Child Three</p></div>
</div>

Насколько я понимаю, hyperHTML устанавливает innerHTML элемента, с которым вы связываетесь. Если я хочу не только изменить innerHTML для #child-two, но и изменить его атрибуты, не касаясь # child-one и # child-three, каков наилучший способ сделать это с помощью hyperHTML?

Is there a way to bind directly to an element to be modified rather than its parent?

I know I could use wire to create a new element and then completely replace the existing element, but then I would not have the ability to continue to bind and update only what has changed.

Answer 1

Здесь есть несколько заблуждений, и я постараюсь рассмотреть все из них.

Насколько я понимаю, hyperHTML устанавливает innerHTML...

hyperHTML не является внутренним HMTL

Люди видят шаблонные литералы, они инстинктивно предполагают, что это innerHTML, но hyperHTML это все, кроме innerHTML,

Название схоже по назначению, но реализация не имеет ничего общего со строками, строки - это просто декларативный фасад, используемый для отображения "всех вещей" и склеивания логики.

Различия между двумя:

1. innerHTML каждый раз удаляет каждый узел и создает все с нуля, а hyperHTML всегда видеть узлы в конкретном контексте
2. innerHTML всегда требует вставки родительского элемента, hyperHTML имеет wire что также вы ищете, но я объясню это позже
3. innerHTML позвольте вам определить разбитые макеты, hyperHTML будет бросать, если вы делаете что-то не так и ожидаете определенной семантики (то есть без частичных атрибутов shenanigans)

Извините, если вы уже знали это, но я думаю, что необходимо уточнить самую основную концепцию hyperHTML,

Теперь давайте двигаться дальше:-)

Есть ли способ привязки непосредственно к элементу, который нужно изменить, а не к его родительскому элементу?

Да, провод.

Я знаю, что мог бы использовать провод для создания нового элемента и затем полностью заменить существующий элемент, но тогда у меня не было бы возможности продолжать связывать и обновлять только то, что изменилось.

Нет. У проводов есть идентификаторы, поэтому каждый идентификатор всегда будет возвращать один и тот же узел.

Если вы хотите подключить #child-two к его родителю, но вы также можете связать его глобально, при необходимости вы можете просто связать его через идентификатор.

const {bind, wire} = hyperHTML;

const outer = bind(document.body);
const inner = wire(document.body, ':child-two');

// you could wire inline but if you want
// to reuse the same node anywhere
// you need a callback to be sure the template literal
// is unique and not a different one each time (latest ES specs)
const child2 = model => inner`
  <div id="child-two" onclick=${model.onclick}>
    <p>${model.text}</p>
  </div>`;

// you can update the parent node every time you want
const update = model => {
  outer`
  <div id="parent" onclick=${model.onclick}>
    <div id="child-one"><p>Child One</p></div>
    ${
      // and pass along any DOM node or wire you want
      child2(model)
    }
    <div id="child-three"><p>Child Three</p></div>
  </div>`;
};

update({
  onclick(event) {
    // will log "parent" or "child-two"
    event.stopPropagation();
    console.log(event.currentTarget.id);
  },
  text: 'This is Child 2'
});

Вы можете проверить приведенный выше код в реальном времени в коде пера