Провод hyperHTML против строки

Question

Провод hyperHTML против строки

Я начинаю использовать hyperHTML есть вопрос

начиная с

const data = [1,2,3]

Используя провод

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => hyperHTML.wire()`<li>${num}</li>`  ) }
`;

Используя строку

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => `<li>${num}</li>`) }
`;

Почему провод лучше?

когда wire не имеет "id" (obj,string), он вернет элемент без ссылок

Вот документация, но они не говорят, почему нужно использовать провод через строку.

Спасибо за любую помощь

Редактировать:

Просто подумав... определил бы лучше использовать? Что-то вроде:

hyperHTML.define(numberListItem, num => `<li>${num}</li>`)

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => ${{numberListItem: num}}) }
`;

Но теперь вы должны заполнить пространство имен каждого маленького элемента:(

2

javascript html dom frameworks hyperhtml

Источник

user8224750 15 дек '17 в 10:13

1 ответ

Решение

Другие вопросы по тегам javascript html dom frameworks hyperhtml

user2800218 17 дек '17 в 13:44 2017-12-17 13:44 · Accepted Answer · 2017-12-17 13:44

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

Это не очень распространенный случай использования в реальных условиях, когда цифры поступают из данных, а данные слабо ссылаются.

Однако, если это точно список из нескольких чисел, которые вы хотите ввести как LI elements, hyperHTML позволяет вам это делать, и если это все, что вам нужно, просто сделайте это.

Теперь позвольте мне объяснить ваш вопрос:

Почему провод лучше?

HyperHTML дает вам возможность определять различные виды контента, в том числе:

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

Возможно, вы захотите / должны использовать функции hyperHTML для создания элементов как разовой операции.

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

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

Теперь позвольте мне показать вам несколько примеров из этого (сокращенного) списка функций.

Пункт 1: текст

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

const data = [
  'hyperHTML is the best',
  '<HTML> 5 Best Practices'
];
// without wire
hyperHTML.bind(document.body)`
  <h1>List of books:</h1>
  <ul>
  ${data.map( text => `<li>${text}</li>` )}
  </ul>`;

Ответ заключается в том, что вторая книга вызовет проблемы макета из-за <HTML> тег, при использовании wire() название будет показано, как ожидалось.

Автоматически санированные макеты являются преимуществом одноразового провода.

Пункт 2: атрибуты

Рассмотрим этот случай:

wire()`<input value=${any} disabled=${!editable} onchange=${react}>`

Это ничего, что вы можете создать как строку по следующим причинам:

значение может содержать нежелательные символы, так что вывод может завершиться ошибкой
Атрибут disabled будет там и независимо от того, что вы передадите, вход будет отключен
событие onchange никогда не будет установлено, как ожидалось

Соответственно, wire()... это более удобный способ создания элемента.

Пункт 3: ленивый контент

const data = [
  'hyperHTML is the best',
  '<HTML> 5 Best Practices'
];
// without wire
hyperHTML.bind(document.body)`
  <h1>List of books:</h1>
  <ul>
  ${data.map(title => `<li>
    ${title}
    ${fetch(`/books-info.php?title=${encodeURIComponent(title)}`)
      .then(b => b.json())
      .then(info => info.stars)
      .catch(err => 'not available')}
  </li>`)}
  </ul>`;

Приведенный выше пример извлечет звезды / показатели из конечной точки и покажет их на месте после разрешения.

Макет будет заполнен, как только ставки будут решены.

О вашем редактировании

define Метод имеет смысл, только если вы представляете способ разрешения значения.

Используя Array Как определить ключ действительно не лучший путь.

Если вам нужно обновить то же самое data снова и снова, вы можете использовать эти данные в качестве ссылки и передавать ключи в качестве идентификаторов.

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

Ваш исходный код будет выглядеть следующим образом:

hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map(
    num => hyperHTML.wire(data, ':' + num)`<li>${num}</li>`
  ) }
`;

wire() Сигнатура действительно принимает эталонный объект, который вы хотели бы связать с каким-либо макетом, а также тип макета и / или его идентификатор.

Это все действительные звонки:

wire()
wire(info)              // info => (html default) node
wire(info, 'html')      // info => html node
wire(info, 'svg')       // info => svg node
wire(info, ':uid')      // info => (html default) node mapped as uid
wire(info, 'html:uid')  // info => html node mapped as uid
wire(info, 'svg:uid')   // info => svg node mapped as uid

С этими примитивами вы можете связать любой список информации с конкретным узлом. Это ключевая концепция React или Vue для стероидов.

Подключите свой собственный провод

Если ни один из вышеперечисленных механизмов не удовлетворяет вашим требованиям, вы всегда можете создать свои собственные провода и использовать их по своему усмотрению.

const data = [1,2,3];
const wires = data.reduce(
  (w, num) => {
    w[num] = wire()`<li>${num}</li>`;
    return w;
  },
  {}
);
hyperHTML.bind(document.getElementById('root'))`
  <h1>Hello, world!</h1>
  ${ data.map( num => wires[num]) }
`;

В приведенном выше примере вы могли бы даже data.sort() и до сих пор получить право LI за правильный номер.

Реальные примеры использования

Я надеюсь, что вы согласны, что наиболее распространенная ситуация заключается в том, что источник информации, ваш data массив, довольно часто, если не всегда, массив объектов.

const data = [
  {title: 'a book', author: 'an author'},
  {title: 'another book', author: 'another author'}
];

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

const {bind, wire} = hyperHTML;
bind(document.body)`
  <h1>List of books:</h1>
  <ul>
  ${data.map(book => wire(book)`
    <li>
      <strong>${book.title}</strong>
      by ${book.author}
    </li>
  `)}
  </ul>`;

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