[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 ...
 
随机推荐
- Layout( 布局)
			
一. 加载方式//class 加载方式<div id="box" class="easyui-layout"style="width:600px ...
 - 【转】tkinter实现的文本编辑器
			
此代码是看完如下教学视频实现的,所以算是[转载]吧: 效果: 代码: # -*- encodin ...
 - Comparable与compareTo
			
Comparable 1.什么是Comparable接口 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 ,类的 compareTo 方法被称为它的自然比较方法 .实现此接口 ...
 - jQuery1.9(辅助函数)学习之——.serialize();
			
$("form").serialize(); 返回一个String 描述: 将用作提交的表单元素的值编译成字符串,这个方法不接受任何参数. .serialize(); 方法使用标 ...
 - 关于本地$.get(url,function(data)),异步获取数据
			
起初 此处url为本地同目录下的html片段 $.get(url,function(data) { alert(url); $("#gallery").append(data); ...
 - Python中urlopen()介绍
			
#以下介绍是基于Python3.4.3 一. 简介 urllib.request.urlopen()函数用于实现对目标url的访问. 函数原型如下:urllib.request.urlopen( ...
 - Python新手学习基础之循环结构——For语句
			
for语句 在Python里,循环语句除了while语句,还有for语句. 通常我们用for循环来遍历(按约定的顺序,对每个点进行访问,且只做一次访问)有序列的内容,比如列表和字符串(列表内容我们会在 ...
 - 《转》JAVA动态代理(JDK和CGLIB)
			
该文章转自:http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的 ...
 - 关于popupwindow的两种实现方式
			
http://104zz.iteye.com/blog/1685389 android PopupWindow实现从底部弹出或滑出选择菜单或窗口 本实例弹出窗口主要是继承PopupWindow类来实现 ...
 - Codeforces 479E Riding in a Lift
			
http://codeforces.com/problemset/problem/432/D 题目大意: 给出一栋n层的楼,初始在a层,b层不能去,每次走的距离必须小于当前位置到b的距离,问用电梯来回 ...