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. Layout( 布局)

    一. 加载方式//class 加载方式<div id="box" class="easyui-layout"style="width:600px ...

  2. 【转】tkinter实现的文本编辑器

    此代码是看完如下教学视频实现的,所以算是[转载]吧: 效果:                                                     代码: # -*- encodin ...

  3. Comparable与compareTo

    Comparable 1.什么是Comparable接口 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 ,类的 compareTo 方法被称为它的自然比较方法 .实现此接口 ...

  4. jQuery1.9(辅助函数)学习之——.serialize();

    $("form").serialize();  返回一个String 描述: 将用作提交的表单元素的值编译成字符串,这个方法不接受任何参数. .serialize(); 方法使用标 ...

  5. 关于本地$.get(url,function(data)),异步获取数据

    起初 此处url为本地同目录下的html片段 $.get(url,function(data) { alert(url); $("#gallery").append(data); ...

  6. Python中urlopen()介绍

    #以下介绍是基于Python3.4.3 一.  简介   urllib.request.urlopen()函数用于实现对目标url的访问. 函数原型如下:urllib.request.urlopen( ...

  7. Python新手学习基础之循环结构——For语句

    for语句 在Python里,循环语句除了while语句,还有for语句. 通常我们用for循环来遍历(按约定的顺序,对每个点进行访问,且只做一次访问)有序列的内容,比如列表和字符串(列表内容我们会在 ...

  8. 《转》JAVA动态代理(JDK和CGLIB)

    该文章转自:http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的 ...

  9. 关于popupwindow的两种实现方式

    http://104zz.iteye.com/blog/1685389 android PopupWindow实现从底部弹出或滑出选择菜单或窗口 本实例弹出窗口主要是继承PopupWindow类来实现 ...

  10. Codeforces 479E Riding in a Lift

    http://codeforces.com/problemset/problem/432/D 题目大意: 给出一栋n层的楼,初始在a层,b层不能去,每次走的距离必须小于当前位置到b的距离,问用电梯来回 ...