Могу ли я использовать HyperX со Snabbdom
HyperX
это модуль, который переводит помеченный литерал шаблона в hyperscript
функционировать как тот, который включен в virtual-dom
,
Snabbdom
использует функцию, подобную гиперкрипту, для создания своих виртуальных машин, но второй аргумент отличается. Вместо атрибутов его свойства используются различными "модулями";
h('div', {
props: {title: someString}, // snabbdom/modules/props
classes: {selected: isSelected}, // snabbdom/modules/class
on: {click: doSomething}, // snabbdom/modules/eventlisteners
style: {color: someColor} // snabbdom/modules/style
}, ['children']);
Можно ли использовать hyperx
с snabbdom
Гиперскрипт работает так:
const h = require('snabbdom/h');
const hyperx = require('hyperx');
const hx = hyperx(h);
let vdom = hx`
<div
title=${someString}
class-selected={isSelected}
on-click={doSomething}
style={({color: someColor})}
>
children
</div>
`;
1 ответ
Да, ты можешь!
var snabbdom = require('snabbdom')
var patch = snabbdom.init([ // Init patch function with chosen modules
require('snabbdom/modules/class'), // makes it easy to toggle classes
require('snabbdom/modules/props'), // for setting properties on DOM elements
require('snabbdom/modules/style') // handles styling on elements with support for animations
])
var h = require('snabbdom/h')
var hyperx = require('hyperx')
var hx = hyperx(h)
var title = 'world'
var wow = [1,2,3]
var tree = hx`<div>
<h1 y="ab${1+2}cd">hello ${title}!</h1>
${hx`<i>cool</i>`}
wow
${wow.map(function (w, i) {
return hx`<b>${w}</b>\n`
})}
</div>`
patch(document.body, tree)
проверьте рабочий код здесь