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

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

0 голосов
/ 09 октября 2018

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

<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?

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

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

1 Ответ

0 голосов
/ 25 октября 2018

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

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

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

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

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

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

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

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

Да, провод .

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

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

Если вы хотите подключить #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'
});

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

...