[Cycle.js] Fine-grained control over the DOM Source
Currently in our main() function, we get click$ event.
function main(sources) {
const click$ = sources.DOM;
const sinks = {
DOM: click$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
//describe what element should exist
.map(i => {
return {
tagName: 'h1',
children: [
{
tagName: 'span',
children: [
`time esplsed: ${i}`
]
}
]
}
})
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
}
What if we want to change it to mouse event? we need to somehow modiy the DOMSource it return from:
function DOMDriver(obj$) { function createElement(obj) {
const element = document.createElement(obj.tagName);
obj.children
.filter(c => typeof c === 'object')
// if it is object, then we need to create another element
.map(createElement)
.forEach(c => element.appendChild(c)); obj.children
.filter(c => typeof c === 'string')
.forEach(c => element.innerHTML += c);
return element;
} obj$.subscribe(obj => {
const container = document.querySelector('#app');
container.innerHTML = '';
const element = createElement(obj);
container.appendChild(element);
}); const DOMSource = Rx.Observable.fromEvent(document, 'click');
return DOMSource;
}
So for main() function, we need to call a function able to manage the tagName and eventType:
const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');
And for the DomDirver, we need add a function which enable user to pass down element and eventType:
const DOMSource = {
selectEvents: function(tagName, eventName){
return Rx.Observable.fromEvent(document, eventName);
}
};
-------------------------
Code:
// Logic (functional)
function main(sources) {
const mouseover$ = sources.DOM.selectEvents('span', 'mouseover');
const sinks = {
DOM: mouseover$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
//describe what element should exist
.map(i => {
return {
tagName: 'h1',
children: [
{
tagName: 'span',
children: [
`time esplsed: ${i}`
]
}
]
}
})
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
} // source: input (read) effects
// sink: output (write) effects // Effects (imperative)
function DOMDriver(obj$) { function createElement(obj) {
const element = document.createElement(obj.tagName);
obj.children
.filter(c => typeof c === 'object')
// if it is object, then we need to create another element
.map(createElement)
.forEach(c => element.appendChild(c)); obj.children
.filter(c => typeof c === 'string')
.forEach(c => element.innerHTML += c);
return element;
} obj$.subscribe(obj => {
const container = document.querySelector('#app');
container.innerHTML = '';
const element = createElement(obj);
container.appendChild(element);
}); const DOMSource = {
selectEvents: function(tagName, eventName){
return Rx.Observable.fromEvent(document, eventName);
}
};
return DOMSource;
} function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
} const drivers = {
DOM: DOMDriver,
Log: consoleLogDriver,
} Cycle.run(main, drivers);
[Cycle.js] Fine-grained control over the DOM Source的更多相关文章
- [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 ...
- [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 ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- 学习RxJS:Cycle.js
原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...
- [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] 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 ...
- js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
- jquery.cycle.js简单用法实例
样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...
- 【转】从Vue.js源码看异步更新DOM策略及nextTick
在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...
随机推荐
- Linux字符设备驱动
一.字符设备基础 字符设备 二.字符设备驱动与用户空间访问该设备的程序三者之间的关系 三.字符设备模型 1.Linux内核中,使用 struct cdev 来描述一个字符设备 动态申请(构造)cdev ...
- ACPI电源管理中的S0 S1 S2 S3 S4 S5
电源选项中S0,S1,S2,S3,S4,S5的含义以 ACPI 的规格来说吧!ACPI(Advanced Configuration and Power Interface),即高级配置与电源接口.这 ...
- USB挂起与唤醒.
USB可见设备状态分为连接(Attached),上电(Powered),默认(Default),地址(Address),配置(Configured)和挂起(Suspended)6个状态.所谓可见,即U ...
- Chrome: Shockwave Flash isn't responding
这个问题问 Google 解决得比较快,百度里尽是转载党的东西! 1. 到 chrome://settings/content 找到 Plug-ins 项目 2. 点击 Plug-ins 里的 Exc ...
- SqlServer 不同服务器之间数据库连接、数据库登录、数据传递
需求:我是本地数据库想纯SQL访问其它服务器上的数据库,而不使用数据库客户端的连接.这里面就想到了数据库link,通过下面的代码进行创建以后,就可以在本地对链接的服务器数据库进行操作了--添加SQLS ...
- My SQL 练习题
设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表 ...
- 用Ajax读取XML格式的数据
].firstChild.data);}catch(exception){ }}}}</script>
- shopnc B2B2C商城 Nginx下开启伪静态
B2B2C商城 Nginx下开启伪静态,伪静态开启后,对系统的SEO极为有利,可以最大限度让商城页面被搜索引擎抓取,但在实际安装中,很多客户在这块都会遇到各种各样的问题. 1. 编辑商城配置文件(da ...
- 用lambda表达式替代 for循环进行批量操作。
IEnumerable<Rect> rectlist3 = rectlist.Select(rect =>newRect(rect.X + 2000, rect.Y, rect.re ...
- C程序设计语言练习题1-6
练习1-6 验证表达式getchar() != EOF的值是0还是1. 代码如下: #include <stdio.h> // 包含标准库的信息. int main() // 定义名为ma ...