Как визуализировать объекты в hyperHTML - PullRequest
Новая
       24

Как визуализировать объекты в hyperHTML

0 голосов
/ 25 сентября 2019

Меня попросили создать выпадающее меню, используя hyperHTML для упражнения.Я новичок в этой среде и, по общему признанию, не нашел большого количества материала о гипертекстовом режиме онлайн, но я разработал базовый шаблон, основанный на том, что я прочитал.Проблема в том, что когда я пытаюсь запустить свой скрипт, используя JSFiddle, он ничего не возвращает из всего содержимого div.Кто-нибудь может объяснить, почему это может быть? 

// HTML

<div id="drop"></div>

// JS

const modes = [{label: 'Driving', value: 'driving'},{label: 'Walking', value: 'walking'},{label: 'Cycling', value: 'cycling'}];

const render = hyperHTML.bind(document.getElementById('drop'));

render`
  <h1>Hello, world</h1>
  <select>
    ${modes.map(obj => wire(obj)`<option value="${obj.value}">${obj.label}</option>`)};
  </select>
`;

Примечание: только когда я добавляю код в параметры выбора, JSFiddle отказывается отображать содержимое div.

1 Ответ

0 голосов
/ 26 сентября 2019

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

Это код, который я использовал в этот код перо , и все работает просто отлично. 

const modes = [
  {label: 'Driving', value: 'driving'},
  {label: 'Walking', value: 'walking'},
  {label: 'Cycling', value: 'cycling'}
];

const {bind, wire} = hyperHTML;
const render = bind(document.getElementById('drop'));

render`
  <h1>Hello, world</h1>
  <select>
    ${modes.map(obj => wire(obj)`<option value=${obj.value}>${obj.label}</option>`)};
  </select>
`;
...