如何在 hyperHTML 中呈现对象

Question

有人要求我使用 hyperHTML 创建下拉菜单作为练习。我是这个框架的新手，并且诚然在 hyperHTML 在线上没有找到很多 material，但我已经根据我所阅读的内容起草了一个基本模板。问题是当我尝试使用 JSFiddle 运行我的脚本时，returns 整个 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>
`;

注意：只有当我在 select 参数中添加代码时，JSFiddle 才会拒绝呈现 div 内容。

Answer 1

根据我从您的代码中看到的情况，您应该对未定义的 wire 有错误，因为您没有在任何地方引用它。

这是我在 this code pen 中使用的代码，一切正常。

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>
`;

如何在 hyperHTML 中呈现对象

How to render objects in hyperHTML

javascript-objects

hyperhtml