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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. The App Life Cycle & The Main Function

    The App Life Cycle Apps are a sophisticated interplay between your custom code and the system framew ...

  4. [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 ...

  5. [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 ...

  6. [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 ...

  7. 学习RxJS:Cycle.js

    原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...

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

    Currently in our main() function,  we get click$ event. function main(sources) { const click$ = sour ...

  9. [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 ...

随机推荐

  1. Linux命令初步了解

    知识点: 1.虚拟控制台: 在系统启动时直接进入字符工作方式后,系统提供了多个(默认为6个)虚拟控制台.每个虚拟控制台可以相互独立使用,互不影响. 可以使用Alt+F1~Alt+F6进行多个虚拟控制台 ...

  2. 小学生之手(01)之 "for循环"

    ---恢复内容开始--- 咳咳咳!第一次要写这种东西,要是有不足的地方,请见谅!!!并且感觉在这班门弄斧是不是有点托大了.一向擅长低调的我,在’被逼无奈‘之下,要嚣张一下了......(此处省略500 ...

  3. django: db howto - 1

    以在 Django 中使用 MySQL 为例,首先要安装 MySQL 和 MySQL-python 组件,确保 python 能执行 import MySQLdb. MySQL 中创建数据库: [ro ...

  4. 安装Node.js

    1.window下安装Node.js 安装git,方便使用命令行. 网址:http://www.git-scm.com/download/ 下载后直接安装即可 接着安装Node.js https:// ...

  5. C++从多n个数中选取m个数的组合

    //start 是从哪个开始取, picked代表已经取了多少个数 //process和data是全局变量数组 //语言说明比较难,我举个例子吧 //从[ 1, 2, 3, 4 ]中选取 2 个数 / ...

  6. 关于ROW_NUMBER函数的使用(The use of ROW_NUMBER function )

    1.用于删除重复记录(The use of to delete the common record) 例子:(Example) #1初始化数据(Initialize the data) CREATE ...

  7. POJ2151 动态规划

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...

  8. ie7 不兼容overflow:hidden;

    用overflow:hidden; 隐藏不需要显示的数据,在IE6\IE8都显示正常,但是在ie7中就是不起作用,万恶的IE7啊.后来加了一句position:relative; 好了... stat ...

  9. swift中的&-备

    参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以引用方式传递,这也是可以实现的,Swift提供 ...

  10. ural 1017. Staircases

    http://acm.timus.ru/problem.aspx?space=1&num=1017 #include <cstdio> #include <cstring&g ...