[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 ...
随机推荐
- Linux命令初步了解
知识点: 1.虚拟控制台: 在系统启动时直接进入字符工作方式后,系统提供了多个(默认为6个)虚拟控制台.每个虚拟控制台可以相互独立使用,互不影响. 可以使用Alt+F1~Alt+F6进行多个虚拟控制台 ...
- 小学生之手(01)之 "for循环"
---恢复内容开始--- 咳咳咳!第一次要写这种东西,要是有不足的地方,请见谅!!!并且感觉在这班门弄斧是不是有点托大了.一向擅长低调的我,在’被逼无奈‘之下,要嚣张一下了......(此处省略500 ...
- django: db howto - 1
以在 Django 中使用 MySQL 为例,首先要安装 MySQL 和 MySQL-python 组件,确保 python 能执行 import MySQLdb. MySQL 中创建数据库: [ro ...
- 安装Node.js
1.window下安装Node.js 安装git,方便使用命令行. 网址:http://www.git-scm.com/download/ 下载后直接安装即可 接着安装Node.js https:// ...
- C++从多n个数中选取m个数的组合
//start 是从哪个开始取, picked代表已经取了多少个数 //process和data是全局变量数组 //语言说明比较难,我举个例子吧 //从[ 1, 2, 3, 4 ]中选取 2 个数 / ...
- 关于ROW_NUMBER函数的使用(The use of ROW_NUMBER function )
1.用于删除重复记录(The use of to delete the common record) 例子:(Example) #1初始化数据(Initialize the data) CREATE ...
- POJ2151 动态规划
#include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...
- ie7 不兼容overflow:hidden;
用overflow:hidden; 隐藏不需要显示的数据,在IE6\IE8都显示正常,但是在ie7中就是不起作用,万恶的IE7啊.后来加了一句position:relative; 好了... stat ...
- swift中的&-备
参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以引用方式传递,这也是可以实现的,Swift提供 ...
- ural 1017. Staircases
http://acm.timus.ru/problem.aspx?space=1&num=1017 #include <cstdio> #include <cstring&g ...