[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 main() {
return {
DOM: Rx.Observable.timer(0, 1000).map( i => `timer is ${i}`),
Log: Rx.Observable.timer(0, 1000).map(i => 2*i )
};
i} function DOMEffect(text$) {
text$.subscribe(text => {
const container = document.querySelector('#app');
container.textContent = text;
});
} function consoleLogEffect(msg$) {
msg$.subscribe(msg => console.log(msg));
} const sinks = main();
DOMEffect(sinks.DOM);
consoleLogEffect(sinks.Log);
[Cycle.js] Customizing effects from the main function的更多相关文章
- [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 anythi ...
- [Cycle.js] Main function and effects functions
We need to give structure to our application with logic and effects. This lessons shows how we can o ...
- The App Life Cycle & The Main Function
The App Life Cycle Apps are a sophisticated interplay between your custom code and the system framew ...
- [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 wa ...
- [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 effec ...
- [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 Dr ...
- 学习RxJS:Cycle.js
原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...
- [Cycle.js] Fine-grained control over the DOM Source
Currently in our main() function, we get click$ event. function main(sources) { const click$ = sour ...
- [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 ...
随机推荐
- 在VM中安装Android4.4连接小米手环 之 在VM中安装Android4.4
今天刚买了个小米手环,系统须要4.4及以上,但自己手机系统版本号不匹配.故打算在VM中安装Android4.4连接小米手环. 这一节先介绍在VM中安装Android4.4(怎么安装VM就不介绍了) 1 ...
- Bitmap的一些操作
1.截取 Bitmap 的部分区域 mBitmap = Bitmap.createBitmap(bmp, 100, 100, 120, 120); 这句代码从 bmp 的 (100,100) 处截取 ...
- Android Studio设置Eclipse风格快捷键
Android Studio的1.1.0版本都发布了,ADT也不会再更新了,童鞋们还有理由不换嘛,不要死守着Eclipse了,Android Studio是你唯一的也是最好的选择.什么?用Eclips ...
- 带搜索功能,支持绑定对象到节点的TreeView辅助类
特点: 1.支持数叶子节点与对象绑定 2.支持xml导入,且数据类相关的xml可自定义,只和泛型的实现有关 3.支持节点搜索功能,可在树结构上要求只显示部分节点 4.用C#编写,但与平台关联性低,可移 ...
- (转)JQuery处理json与ajax返回JSON实例
son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过 ...
- (转)ASP.NET 伪静态
1.伪静态:http://www.cnblogs.com/Default.html 目的就是为了赢得更多的收入,至于真否,待SEOer 解答,正如文字所说,伪静态就是假的静态. 2.准备工作:下载Ur ...
- C#获取当前路径的几种方法
C#获取当前路径的方法如下: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2. ...
- shell获取日期(昨天,明天,上月,下月)
今天 sh-4.1$ echo `date +%Y-%m-%d` 2016-08-17 昨天 sh-4.1$ echo `date -d "last day" +%Y-%m-%d` ...
- java部分基础总结
新手期一些知识的总结面向对象: 首先先将面向对象与面向过程区分开:面向过程主要是通过过程,达到某种目的,这种目的的目标就是对象,二面向对象重点则是不再考虑过程,直接面向对象! 对象 概念:一切客观存在 ...
- Sed命令学习
1.Sed简介 流数据编辑器 Stream editer(sed),它是一种行编辑器(对应于全屏编辑器),一次处理一行的内容.默认不编辑原文件内容(-i会直接修改原文件).处理时,它先将当前符 ...