[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 ...
随机推荐
- $_SERVER变量 以及 PHP 使用 $_SERVER['PHP_SELF'] 获取当前页面地址及其安全性问题
PHP $_SERVER['PHP_SELF'] $_SERVER['PHP_SELF'] 表示当前 php 文件相对于网站根目录的位置地址,与 document root 相关. 假设我们有如下网址 ...
- OD: Memory Attach Technology - Exception
看到第六章了:形形色色的内存攻击技术 异常处理结构体 S.E.H Structure Exception Handler S.E.H 是 Windows 处理异常的重要数据结构.每个 S.E.H 为 ...
- HTML与CSS入门——第四章 理解层叠样式表
知识点: 1.创建基本样式表的方法 2.使用样式类的方法 3.使用样式ID的方法 4.构建内部样式表和嵌入样式的方法 4.1 CSS工作原理: CSS:层叠样式表的缩写,是一种定义样式结构如字体.颜色 ...
- ASP.NET MVC Controller接收ajax post方式发送过来的json对象或数组数据
本例旨在说明我的一种Controller接收ajax提交(POST)过来的json对象或数组信息的方式,感觉应该有更好的方式,欢迎提出宝贵意见. JSON.stringify(jsonObj)不支持I ...
- ArcGIS Server Manager登陆不了
我很是郁闷,安装都好了(post安装完成之后它要我将 相关的用户(我在这里安装的时候已指定) 添加到 agsadmin和agsusers两个用户组中.都做好了, 我甚至将刚刚的用户和用户组都删掉,重新 ...
- Swift 流程控制
import Foundation ...{ == { print(index) } } // 可选变量 类型后面加? var myName:String?="jikexueyuan&quo ...
- C#学习笔记之结构体
1.概述 结构是一种与类相似的数据类型,不过它较类更为轻量,一般适用于表示类似Point.Rectangle.Color的对象.基本上结构能办到的类全都能办到,但在某些情况下使用结构更为合适,后面会有 ...
- arraylist的使用
ArraylistDemo package cn.stat.p6.arraylist.demo; import java.util.ArrayList; import java.util.Iterat ...
- uCgui和emWin的区别
在国内做嵌入式系统的,开始入门OS的时候,大家应该都会选择uC/OS,为什么?因为代码开源且资料众多嘛.由于uC/OS的原因大家也一定接触了uC/GUI的嵌入式图形软件库.其实uC ...
- Github提交代码及分支管理
#提交代码cd <Cat>git initgit add .git statusgit commit -m "注释"git remote add origin < ...