Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.
const {label, input, hr, h1, div, makeDOMDriver} = CycleDOM;
function main(sources) {
// Read from driver, select '.field' class bind with input event.
const inputEvent$ = sources.DOMM.select('.field').events('input');
// each input event will map to it's value
// Because at first there is no input, so we mock one by using startWith('')
const name$ = inputEvent$.map( ev => ev.target.value).startWith('');
return {
// Each name event will output the CycleDOM
DOMM: name$.map( name => {
return div([
label('Name: '),
input('.field',{type: 'text'}),
hr(),
h1(`Hello ${name}`)
])
})
};
}
const drivers = {
DOMM: makeDOMDriver('#app')
}
Cycle.run(main, drivers);