[Cycle.js] Read effects from the DOM: click events

【[Cycle.js] Read effects from the DOM: click events】的更多相关文章

[Cycle.js] Read effects from the DOM: click events

So far we only had effects that write something to the external world, we are not yet reading anything from the external world into our app. This lesson shows how we can change the DOM Driver to return a "DOM Source" representing read effects, s…

[Cycle.js] Fine-grained control over the DOM Source

Currently in our main() function, we get click$ event. function main(sources) { const click$ = sources.DOM; const sinks = { DOM: click$ .startWith(null) .flatMapLatest(() => Rx.Observable.timer(0, 1000) //describe what element should exist .map(i =>…

[Cycle.js] Customizing effects from the main function

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect. // Logic (functional) function…

[Cycle.js] The Cycle.js principle: separating logic from effects

The guiding principle in Cycle.js is we want to separate logic from effects. This first part here was logical, and this second part here was effects. Effects are everything that change the external world somehow, the real world such as the DOM is con…

[Cycle.js] Making our toy DOM Driver more flexible

Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects…

[Cycle.js] From toy DOM Driver to real DOM Driver

This lessons shows how we are able to easily swap our toy DOM Driver with the actual Cycle.js DOM Driver, a more solid, more flexible, more efficient implementation. <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudf…

学习RxJS：Cycle.js

原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI): 函数式 Cycle.js 把应用程序抽象成一个纯函数 main(),从外部世界读取副作用(sources),然后产生输出(sinks) 传递到外部世界,在那形成副作用.这些外部世界的副作用,做为Cycle.js的…

jquery.cycle.js简单用法实例

样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padding:13px 0px 0px 1…

[Cycle.js] Generalizing run() function for more types of sources

Our application was able to produce write effects, through sinks, and was able to receive read effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an…

[Cycle.js] Hello World in Cycle.js

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…