使用 RxJs 将多个回调返回映射到 observable答案

【问题标题】：map multiple callback returns into observable using RxJs使用 RxJs 将多个回调返回映射到 observable
【发布时间】：2017-08-10 16:20:03
【问题描述】：

我目前正在开始使用 RxJs 并尝试定义返回 observables 的模块。（每个模块都作为一个黑盒工作，只公开其可观察对象）。我的主要问题是由于我正在使用的第三方库：UWA：我所有的 dom 元素都是从 UWA 对象生成的并触发 UWA“事件”。顺便说一句，我想将这些自定义事件映射到 observables。这是事件数据结构的一部分：

tabBar = *somecode*...{
....
  onEndEditTab: function (callback) {
    return this.modelEvent.subscribe({
      event: endEditTabEvent
    }, callback);
  },....
}

这是我当前的代码：

const tabBar = new tabBar();
tabBar.inject(domContainer);
const observer={
  next: (t) =>{
    const oldValue=t.target.textContent;
    const cbObservable = Rx.Observable.bindCallback(tabBar.onEndEditTab);
    //a new cbObservable is created at each dblclick event
    // (due to bindCallBack property which is to retern only one time.
    cbObservable .call(tabBar).subscribe(
      (v) => {
         console.log({oldLabel:oldValue,newLabel:v[0].button.label});
      }
    );          
Rx.Observable.fromEvent(tabBar, 'dblclick').subscribe(observer);

每次编辑选项卡标签时，此代码都会起作用并记录旧值和新值。但目前我想要的不仅仅是打印它，而是将所有这些结果聚合到一个新的 Observable 流中。使用大理石图：

dblclick : ----(1)----(2)---....(n)->

（其中有一个未知数 n 的 dblclick...）映射到：

cbObservable : ----(1:{old,new})--|
               ----(2:{old,new})--| 
               ....
               ----(n:{old,new})--|

而我目前想要的是：

outputStream : ----(1:{old,new})---(2:{old,new})--...(n:{old,new})--->

其中 outputStream 是一个热可观察对象；有没有办法在上述所有约束条件下做到这一点？谢谢！

【问题讨论】：

标签： javascript rxjs5

【解决方案1】：

尝试使用 switchMap

Rx.Observable.fromEvent(tabBar, 'dblclick').switchMap(() => {
    const oldValue=t.target.textContent;
    return Rx.Observable.bindCallback(tabBar.onEndEditTab).map((v) => {
       return {old: oldValue, new: v[0]}
    });
})

或类似的东西，然后对结果 observable 进行单次订阅

【讨论】：

根据定义：bindCallback 不是运算符，因为它的输入和输出不是 * Observables。输入是带有一些参数的函数func，但*最后一个参数必须是func在完成时调用的回调函数。所以问题更多了，如何将此输出转换为可观察的？

【解决方案2】：

@llCorvinuSll：感谢您的回答，经过一个简单的修改，它就可以工作了：

将 call(yourObject) 添加到 bindCallback ！ bindCallback 返回一个函数，所以需要调用它：

Rx.Observable.fromEvent(tabBar, 'dblclick').switchMap(() => {
    const oldValue=t.target.textContent;
    return Rx.Observable.bindCallback(tabBar.onEndEditTab).call(tabBar).map((v) => {
       return {old: oldValue, new: v[0]}
    });
})

【讨论】：