Sometimes, the helper methods that RxJS ships with such as fromEventfromPromise etc don't always provide the exact values you want & you end up having to do extra work to force them into the shape you require. For more fine-grained control you can use Observable.create which allows you to project only the values which matter to you.

For example, the following code need add a filter method to filter the null value from the event.

const fromEvent    = Rx.Observable.fromEvent;

function delegate (wrapperSelector, elementSelector, eventName) {

  return fromEvent(
document.querySelector(wrapperSelector),
eventName,
(ev) => {
return ev.target.closest(elementSelector);
}
).filter(x => x !== null)
} delegate('.wrapper', 'button', 'click')
.subscribe(x => {
document.querySelector('#output').textContent = `Button ${x.textContent} clicked`;
});

We can use create method to do:

const create    = Rx.Observable.create;

function delegate (wrapperSelector, elementSelector, eventName){
return create( (observe)=> {
const wrapper = document.querySelector(wrapperSelector);
const handler = (ev) => {
const match = ev.target.closest(elementSelector);
if(match) {
return observe.onNext(match);
}
} wrapper.addEventListener(eventName, handler, false); // cancel the listener
return ()=>{
wrapper.removeEventListener(eventName, handler);
}
});
}

So to recap, sometimes the values that are projected from the helpers that RXJS ships with, are not exactly what you want, and you end up having to do a little bit of extra work to force them into the shape that want. If you find yourself doing this, you can always use create instead.

Create is the factory function that creates an anonymous observable for you, gives you the opportunity to only project the values that you want. You end up having to do a bit more manual work, such as adding event listeners and removing them finished with, but the result will be greater performance and greater control.

[RxJS] Using Observable.create for fine-grained control的更多相关文章

  1. [RxJS] Creation operator: create()

    We have been using Observable.create() a lot in previous lessons, so let's take a closer look how do ...

  2. Angular学习笔记—RxJS与Observable(转载)

    1. Observable与观察者模式的关系 其实这里讲的Observable就是一种观察者模式,只不过RxJS把Observable结合了迭代模式以及附件了很多的operator,让他变得很强大,也 ...

  3. [RxJS] Creating Observable From Scratch

    Get a better understanding of the RxJS Observable by implementing one that's similar from the ground ...

  4. ng-packagr 打包报错 Public property X of exported class has or is using name 'Observable' from external module “/rxjs/internal/Observable” but cannot be named

    old import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable( ...

  5. Create Hierarchical Tree To Control Records In Oracle Forms

    Download Source Code Providing an example form for creating hierarchical trees in Oracle Forms to co ...

  6. Rxjs 修改Observable 里的值

    有这么一个对象c$: Observable<any> 修改里边的值: 声明一个subject subject: Subject<any>; 在ngOnInit()中进行初始化 ...

  7. [RxJS] Hot Observable, by .share()

    .share() is an alias for .publish().refCount(). So if the source is not yet completed, no matter how ...

  8. Springfox Reference Documentation

    1. Introduction The Springfox suite of java libraries are all about automating the generation of mac ...

  9. [转载] 跟着实例学习zookeeper 的用法

    原文: http://ifeve.com/zookeeper-curato-framework/ zookeeper 的原生客户端库过于底层, 用户为了使用 zookeeper需要编写大量的代码, 为 ...

随机推荐

  1. 使用Qt Style Sheets制作UI特效

    引言 作为一套GUI框架,Qt是非常强大的.(注:Qt 不仅是一套优秀的GUI框架,同时也是一套出色的应用程序框架).在UI的制作方面Qt为广大开发者提供了一套强大而易用的工具,她就是——Qt Sty ...

  2. mongodb.open失效导致访问地址404

    今天做编辑文章功能的时候发现一个问题,编辑并保存完成后再次跳转到当前文章所在的地址,结果报404,打断点发现查询数据库的时候mongodb.open方法失效.百度后找到了原因: 编辑保存的时候打开了数 ...

  3. 未能加载文件或程序集“System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”

    最近用vs2012发布程序,然后将更新后的程序文件部署到服务器上,由于服务器上本来有此系统,所以只更新了修改的文件 . 进行系统登录时提示:未能加载文件或程序集“System.Web.Extensio ...

  4. js获取浏览器滚动条距离顶端的距离

    最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:    一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示 ...

  5. FpSpread添加标注

    先看效果 实现: FarPoint.Web.Spread.StyleInfo Errorcss = new FarPoint.Web.Spread.StyleInfo(); Errorcss.Bord ...

  6. Silverlight Visifire控件 .net后台控制aspx页面控件的显示与隐藏,动态给控件赋值,选定默认值的设定

    .net后台代码: 控件的显示与隐藏: this.dateStart.Visibility = Visibility.Collapsed;//不显示控件 this.dateYear.Visibilit ...

  7. unity绘制线和绘制面

    绘制线条代码,其实就是指定至少两个点,然后赋予贴图即可,不废话,上代码: using UnityEngine; using System.Collections; public class LineT ...

  8. CAS单点登录原理以及debug跟踪登录流程

    CAS 原理和协议 基础模式 基础模式 SSO 访问流程主要有以下步骤: 1. 访问服务: SSO 客户端发送请求访问应用系统提供的服务资源. 2. 定向认证: SSO 客户端会重定向用户请求到 SS ...

  9. 用excel做一幅像素画

    开发背景 看到网上有人发教程,如何通过在excel里设置单元格颜色画一幅画,感觉手工做太复杂,就打算用程序实现一个. 开发运行环境 python 2.7 PIL xlsxwriter 用法 pytho ...

  10. Java中循环删除list中元素的方法总结

    印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后在今天使用的时候发现报错了,然后去科普了一下,发现这是一个误区.下面我们来一起看一下. Java中循环遍 ...