首页 > Web开发 > 详细

[Cycle.js] Hello World in Cycle.js

时间:2016-02-24 09:18:34      阅读:287      评论:0      收藏:0      [点我收藏+]

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);

 

[Cycle.js] Hello World in Cycle.js

原文:http://www.cnblogs.com/Answer1215/p/5211694.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!