使用RxJs将多个回调返回到可观察状态

使用RxJs将多个回调返回到可观察状态

问题描述:

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

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)-> 

(其中有DBLCLICK未知数n ...) 映射到:

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

而我现在想的是:

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

其中outputStream是一个热可观测值; 有没有这样做的方式与上述所有约束? 谢谢!

尝试使用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]} 
    }); 
}) 

或这样的事情,然后做单订阅新资料,导致观察到

+0

根据定义:'bindCallback'不是一个运营商,因为它的输入和输出都没有 *观测量。输入是一个带有一些参数的函数'func',但 *最后一个参数必须是一个回调函数,当func调用 *时,函数会被调用。 所以问题更多,如何将此输出转换为可观察? – occimort

@llCorvinuSll:谢谢你的回答,一个简单的修改,这是工作后:

将调用(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]} 
    }); 
})