[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数据请求时未调用 ...
随机推荐
- [Redux] React Todo List Example (Filtering Todos)
/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...
- codeforces C. Cd and pwd commands 执行命令行
执行命令来改变路径 cd 并显示路径命令 pwd 一个节目的 抽样: input 7 pwd cd /home/vasya pwd cd .. pwd cd vasya/../petya pwd ou ...
- swift2.0 UIImagePickerController 拍照 相册 录像
系统 ios9.1 语言swift2.0 在app 里最常用的功能就是多媒体选择,首先我们storyboard 创建一个button 用于触发选择事件 @IBAction func selectIma ...
- openssl 非对称加密算法RSA命令详解
1.非对称加密算法概述 非对称加密算法也称公开密钥算法,其解决了对称加密算法密钥分配的问题,非对称加密算法基本特点如下: 1.加密密钥和解密密钥不同 2.密钥对中的一个密钥可以公开 3.根据公开密钥很 ...
- VS2015 添加DNX SDK
第一次运行VS2015,添加第一个ASP.NET 5程序时会报一个错误“DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装. 解决办法: 打开CMD :输入 @po ...
- CSS基础知识笔记(二)之选择器
CSS选择器 选择器{ 样式; } 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元 ...
- js html5 仿微信摇一摇
看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...
- PL/SQL中字符串变量的分割转化
在编写PL/SQL时,有时候我们需要处理这样一个输入的变量,它的格式是由多个值通过分隔符组成的字符串,如“1,2,3”,我们需要将这个变量加入到我们的SQL中,形成诸如in('1','2','3')的 ...
- CF 8D Two Friends 【二分+三分】
三个地点构成一个三角形. 判断一下两个人能否一起到shop然后回家,如果不能: 两个人一定在三角形内部某一点分开,假设沿着直线走,可以将问题简化. 三分从电影院出来时候的角度,在对应的直线上二分出一个 ...
- akoj-1140-英雄联盟阵营
英雄联盟阵营 Time Limit:1000MS Memory Limit:65536KTotal Submit:54 Accepted:16 Description 符文之地——瓦罗兰,作为最大的 ...