Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects that describe what elements should exist, instead of strings as the DOM sink.

// Logic (functional)
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;
} // 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 = Rx.Observable.fromEvent(document, 'click');
return DOMSource;
} function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
} const drivers = {
DOM: DOMDriver,
Log: consoleLogDriver,
} Cycle.run(main, drivers);

[Cycle.js] Making our toy DOM Driver more flexible的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [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 ...

  4. 学习RxJS:Cycle.js

    原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...

  5. RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?

    RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...

  6. [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 ...

  7. jquery.cycle.js简单用法实例

    样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...

  8. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  9. jquery.cycle.js

    jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...

随机推荐

  1. python模块基础之OS模块

    OS模块简单的来说它是一个Python的系统编程的操作模块,可以处理文件和目录这些我们日常手动需要做的操作. 可以查看OS模块的帮助文档: >>> import os #导入os模块 ...

  2. 前端 HTML基础

    前端三大利器概述 学习前端,不得不学习前端中的三大利器:html + css + javascript.那么这三个组件分别起到什么作用呢?以人体为例,单单具有html属性的人,只是一个裸体的人偶(理解 ...

  3. Aspose.Words导出dt到word的问题

    已解决:单挑数据导入到一个word文档,导出文字和图片成功,执行Main();方法导出dt到word 待解决:多条数据(文字,图片的导入到一个word文档里面)从dt导入到word;已发现的错误提示“ ...

  4. lvm拉伸逻辑卷分区小总结

    文件系统                                      容量     已用      可用     已用% 挂载点 /dev/mapper/vg_znl-lv_root   ...

  5. GridView 和 Access数据库实现数据绑定(asp.net)

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="主页.aspx.cs ...

  6. Width vs Pitch

    1.单位不同,width是像素,pitch是字节.因此一个640*480的8位图和640*480的32位 图他们width一样而pitch不一样. 2.pitch可能大于width个像素所占字节数.w ...

  7. Oracle—用户管理的备份(二)

    在用户管理的备份(一)中(详见:Oracle—用户管理的备份)对用户管理备份几种情况进行了说明:接下来说明几种特别情况和DBverify的使用. 一.如果在表空间在备份模式下,主机发生了异常关闭,会出 ...

  8. 对于js原型和原型链继承的简单理解(第二种,对象冒充)

    关键代码    this.parent = Cat;    this.parent.apply(this); function Cat(){ this.climb = function(){ aler ...

  9. Clover周报模块 -- 开发总结

    2014年7月8日 00:16:05 一.切图 这次开发,切图花了不少时间,样式是用scss写的,第一次用,不过用着用着就发现它的强大,层级.作用域.重用等都非常的方便,还有考拉神器,用着真是爽!不过 ...

  10. dubbo No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry

    No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry http:// ...