[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数据请求时未调用 ...
随机推荐
- FLEX中Tree默认展开全部节点
这里分两种情况,一种是数据源在MXML文件里,如: <mx:XML id="treeXML" format="e4x"> <root> ...
- Linux基础知识（二）
1. 请回答,32位和64位有什么区别呢?什么时候安装32位的,又什么时候安装64位操作系统呢?如何查看系统是32位的还是64位的? 所谓的32位.64位指的是CPU的GPRs(General-Pur ...
- CodeSmith使用总结--调用自定义方法
上一篇读取了一个表的内容,但是到了真正应用的时候还是不够用的,我们很容易可以对比出来,SQL里边的数据类型的定义和C#中有所不同,比如Saler--String,大写的String在C#中不是一个类型 ...
- 关于asp.net的<%#%>的一些总结
一.说明 asp特有的控件在前台绑定数据的语法,且必须要调用该控件的DataBind()方法才执行,也可以整个页面数据绑定. 二.注意 1.并不是只有服务器控件才可以使用该语法,当整个页面调用this ...
- js调用百度地图搜索功能
引用百度jsApi <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&a ...
- GacLib使用方法（一）
GacLib使用方法 这是vczh大神的GacLib库新手入门,为自己做点笔记,详细的信息可以参考网页.下面简单说说怎么在自己的程序中使用GacLib库,本文只是前述网址中新手教程的一点体验,使用的环 ...
- 遍历String字符串，得到出现次数最多的字母
//There is no need to explain the code right? package com.hp.test; import java.util.HashMap; import ...
- js prototype之诡异
想必经常写js的人必然会经常性的用到prototype这个属性,我写这篇文章倒不是自己对prototype这个属性理解有多深刻,相反是因为自己理解肤浅,想通过写文章来加深理解.废话不多说.下面总结一下 ...
- hibernate多对多映射文件详解（一）
1.仓库表属性 public class WarehouseNew implements java.io.Serializable { // Fields private static final l ...
- Symfony2 Doctrine从现有Database生成Entity(转载自http://blog.it985.com/6809.html)
在我的以前一章Symfony之十分钟入门说了怎样生成数据库,然后设计实体Entity,再同步数据库的表结构,一般我们的顺序都是这样:生成数据库->设计实体Entity->同步数据库表结构. ...