[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 Driver, a more solid, more flexible, more efficient implementation.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.3/dist/cycle.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-dom/v9.1.0/dist/cycle-dom.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
const {h, h1, span, makeDOMDriver} = CycleDOM;
// Logic (functional)
function main(sources) {
const mouseover$ = sources.DOM.select('span').events('mouseover');
const sinks = {
DOM: mouseover$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
.map(i =>
h1({style: {background: 'red'}}, [
span([
`Seconds elapsed: ${i}`
])
])
)
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
}
// Effects (imperative)
function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
}
const drivers = {
DOM: makeDOMDriver('#app'),
Log: consoleLogDriver,
}
Cycle.run(main, drivers);
[Cycle.js] From toy DOM Driver to real DOM Driver的更多相关文章
- [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 ...
- 学习RxJS：Cycle.js
原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- [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 ...
- jquery.cycle.js简单用法实例
样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- jquery.cycle.js
jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...
- echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 ...
随机推荐
- UVA 1558 - Number Game(博弈dp)
UVA 1558 - Number Game 题目链接 题意:20之内的数字,每次能够选一个数字,然后它的倍数,还有其它已选数的倍数组合的数都不能再选,谁先不能选数谁就输了,问赢的方法 思路:利用dp ...
- top 命令SQLServer-sybase-oracle
SQLServer: select top 10 * from tablename; select top 10 percent from tablename; select * from table ...
- 【转】Objective-C消息机制的原理
转自:http://dangpu.sinaapp.com/?p=119 在Objective-C中,message与方法的真正实现是在执行阶段绑定的,而非编译阶段.编译器会将消息发送转换成对objc_ ...
- .NET基础拾遗（6）特性
1 神马是特性?如何自定义一个特性? (1)特性是什么 特性是一个对象,可以加载到程序集及程序集的对象中,这些对象包括 程序集本身.模块.类.接口.结构.构造函数.方法.方法参数等,加载了特性 ...
- C#中唯一标识符GUID的一些知识点
概念 GUID: 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifier) . GUID是一个通过特定算 ...
- 《第一行代码》学习笔记28－内容提供器Content Provider（1）
1.内容提供器:用于在不同的应用程序之间实现数据共享的功能,提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能保证被访问 数据的安全性.使用内容提供器是Android实现跨程序共享数据 ...
- 13 java 设计模式--单例模式
/** * 单例 */ public class JobSchedulerService { //防止类外部通过new实例化该类 private JobSchedulerService() { } / ...
- PAT 65. A+B and C (64bit) (20)
题目链接:http://pat.zju.edu.cn/contests/pat-a-practise/1065 思路分析: 1)对a+b造成的long long 类型的数据溢出进行特殊处理: a> ...
- <Win32_5>深入浅出Win32的计时器
说起时间,对于我们搞IT的人来说,那是要多重要有多重要.我觉得有价值的时间是给有抱负和有才能的人准备的,因为他们会充分利用,不会让时间失望…… 呵呵,有点儿说远了,还是回归主题吧 Win32的计时器其 ...
- .Net 插入数据MySql数据库，中文乱码解决问题
1, 修改mysql根目录下配置文件my.ini,在[client]节点下添加default-character-set=utf8 ,在[mysqld]节点下添加character_set_serve ...