Как динамически изменить тег в hyperHTML - PullRequest
Новая
       21

Как динамически изменить тег в hyperHTML

0 голосов
/ 17 февраля 2019

Этот код не работает. 

const render = ({title, tag, values}) => {
    bind(document.body)`
        <h1>${title}</h1>
        <div>
            <${tag} data=${values}></${tag}>
        </div>
    `
}

render({title: "test", tag: "custom-elem1", values: {foo: "bar"}})

Можно ли динамически изменять тег с помощью hyperHTML?

1 Ответ

0 голосов
/ 17 февраля 2019

Вам может не понравиться ответ, но он Нет , вы не можете.

Причина в том, что hyperHTML , как и любая другая подобная библиотека, не 'Работая со строками, он работает с DOM, и в мире DOM вы не можете изменить имя тега, даже если попытаетесь. 

var div = document.createElement('div');
div.tagName = 'P';
console.log(div.tagName); // "DIV"

Вместо этого вы можете вернуть понравившийся элемент.

const render = ({title, tag, values}) => {
  const ref = document.body;
  bind(ref)`
    <h1>${title}</h1>
    <div>${(() => {
      switch tag:
        case 'custom-elem1':
          return wire(ref)`<custom-elem1 data=${values} />`;
        case 'custom-elem2':
          return wire(ref)`<custom-elem2 data=${values} />`;
        case 'custom-elem3':
          return wire(ref)`<custom-elem3 data=${values} />`;
      })()
    }</div>`;
};

В этом случае вы можете делать все, что захотите, до тех пор, пока вы не будете пытаться изменить природу тегов DOM на лету, потому что даже hyperHTML не может это сделатьчто 101

...