[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 ...
随机推荐
- Android文字的复制和粘贴
Android中提供了简单的额复制粘贴功能.代码很简单 复制文字的代码: ClipboardManager cbm= (ClipboardManager) MainActivity.this .get ...
- RedHat下GCC及G++的安装
GCC的安装: 切换到安装光盘目录下: #mount /dev/cdrom /mnt/cdrom #cd /mnt/cdrom 安装GCC依赖的*rpm程序,必须按照顺序依次执行: #rpm - ...
- JQuery中常用的 属性选择器
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...
- css控制图片变灰色,彩色
<A href="链接地址"><IMG src="p1.jpg" border="0"></A> < ...
- cas+tomcat+shiro实现单点登录-1-tomcat添加https协议
目录 1.tomcat添加https安全协议 2.下载cas server端部署到tomcat上 3.CAS服务器深入配置(连接MYSQL) 4.Apache Shiro 集成Cas作为cas cli ...
- Objective-C中instancetype和id的区别
要区分instancetype和id,首先要弄清楚什么是关联返回类型(Related Result Type). 关联返回类型即一个方法的返回类型就是调用这个方法的调用者的类型.具有下列条件的方法具有 ...
- osg复制多个相同物体修改材质属性问题
转自http://www.cnblogs.com/ylwn817/articles/2153982.html 当通过osg复制多个相同物体时候,修改复制过来的某个物体材质属性时候,假设我们物体透明度, ...
- sublime3配置及插件安装
1.下载https://github.com/wbond/sublime_package_control中的zip文件,解压后将文件夹名更改为Package Control. 2.将1中的文件夹放入s ...
- ECSTORE验证码优化
用ecstore的朋友应该知道,ecstore的验证码超级鸡肋. 特别是字母和数字混合,根本就看不懂写的是什么? 数字还好,但是字母就别提了.而且还小. 索性就把验证码换掉.研究一下发现,ecstor ...
- 深入浅出scanf、getcha、gets、cin函数
转:问题描述一:(分析scanf()和getchar()读取字符) scanf(), getchar()等都是标准输入函数,一般人都会觉得这几个函数非常简单,没什么特殊的.但是有时候却就是因为使用这些 ...