Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cycle.js example in CoffeeScript
{run} = require '@cycle/core'
{Observable} = require 'rx'
{div, input, h2, makeDOMDriver} = require '@cycle/dom'
intent = (domSource) =>
changeWeight$ = domSource
.select('#weight').events('input')
.map((ev) => ev.target.value)
changeHeight$ = domSource
.select('#height').events('input')
.map((ev) => ev.target.value)
{changeWeight$, changeHeight$}
model = ({changeWeight$, changeHeight$}) =>
Observable.combineLatest(
changeWeight$.startWith(70)
changeHeight$.startWith(170)
(weight, height) =>
heightMeters = height * 0.01
bmi = Math.round(weight / (heightMeters * heightMeters))
{weight, height, bmi}
)
view = (state$) =>
state$.map(({weight, height, bmi}) =>
div [
div [
"Weight #{weight} kg"
input '#weight', {type: 'range', min: 40, max: 140, value: weight}
]
div [
"Height #{height} cm"
input '#height', {type: 'range', min: 140, max: 210, value: height}
]
h2 "BMI is #{bmi}"
]
)
main = (sources) =>
{ DOM: view model intent sources.DOM }
run(main, {
DOM: makeDOMDriver('#main-container')
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.