[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 ...
随机推荐
- Hadoop-2.2.0中文文档—— Common - CLI MiniCluster
目的 使用 CLI MiniCluster, 用户能够简单地仅仅用一个命令就启动或关闭一个单一节点的Hadoop集群,不须要设置不论什么环境变量或管理配置文件. CLI MiniCluster 同一时 ...
- nginx安装(正式)
一.安装说明 系统环境:CentOS Linux release 7.2.1511 (Core) 系统内核:3.10.0-327.el7.x86_64软件:nginx-1.10.1.tar.gz其他所 ...
- 网页HTML1
表格表单 表格, <tabale> -------表格 <tr> --------------行 <td> -- ...
- Python代码分析工具之dis模块
转自:http://hi.baidu.com/tinyweb/item/923d012e8146d00872863ec0 ,格式调整过. 代码分析不是一个新的话题,代码分析重要性的判断比较主观,不同 ...
- iOS 用命令行进行打包
通过命令行编译打包 第一步,打开终端,输入: cd 把项目文件拖到这里(注意:cd后面要有空格,然后再把项目文件拖进来) 回车 第二步,clean工程(默认release版本),在终端输入: xcod ...
- java事件演示
package cn.stat.p3.windowdemo; import java.awt.Button; import java.awt.FlowLayout; import java.awt.F ...
- 【转】C++中的位拷贝与值拷贝
[转]http://blog.csdn.net/liam1122/article/details/1966617 为了便于说明我们以String类为例: 首先定义String类,而并不实现其成员函数. ...
- DataTable 对象 转换为Json 字符串
/// <summary> /// DataTable 对象 转换为Json 字符串 /// </summary> /// <param name="dt&qu ...
- 40条优化php代码的小实例
1.如果一个方法能被静态,那就声明他为静态的,速度可提高1/4; 2.echo的效率高于print,因为echo没有返回值,print返回一个整型; 3.在循环之前设置循环的最大次数,而非在在循环中; ...
- Python新手学习基础之循环结构——For语句
for语句 在Python里,循环语句除了while语句,还有for语句. 通常我们用for循环来遍历(按约定的顺序,对每个点进行访问,且只做一次访问)有序列的内容,比如列表和字符串(列表内容我们会在 ...