我被要求使用hyperHTML创建一个下拉菜单进行练习。我是这个框架的新手,并且在在线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>
`;
注意:只有当我在select参数中添加代码时,JSFiddle才拒绝呈现div内容。
从我的代码中可以看到,关于未定义的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>
`;