Now you should has a good idea what cycle.run does, and what's the DOM Driver is. In this lesson, we'll not build a toy version of Cycle.js anymore. Instead, we'll learn how to use cycle.js to solve problems. We'll start by making a simple Hello world application.
const {label, input, HR, H1, div, makedomdriver} =Cycledom;functionMain (sources) {//Read from driver, select '. Field ' class bind with input event.Const inputevent$ = sources. Domm.select ('. field '). Events (' input '); //Each input event would map to it ' s value //Because At first there are no input, so we mock one by using Startwith (')Const name$ = inputevent$.map (ev = ev.target.value). Startwith ("); return { //Each name event would output the CycledomDomm:name$.map (name = { returnDiv ([Label (' Name: '), input ('. Field ', {type: ' text '}), HR (), H1 (' Hello ${name} ')]})}; Const drivers={domm:makedomdriver (' #app ')}cycle.run (main, drivers);
[Cycle.js] Hello World in Cycle.js