如何設置Rx.Observable.fromEvent以使用jQuery過濾事件

Question

Rx.Observable.fromEvent(element, eventName)有很多示例， Rx.Observable.fromEvent(element, eventName)示例使用jquery選擇作為捕獲事件的元素。 但是，Rx是否有可能僅使用jQuery篩選的事件設置來偵聽事件？

//Bind the event on body but only respond to events that match the filter
$('body').on('click', '.aClass div .something', function () {...});

//Bind to 'body' but only respond to events from the binding above
Rx.Observable.fromEvent(/*something here?*/);

我想出了一些實際上相似的東西，但是看起來比jquery過濾器要昂貴得多。

Rx.Observable.fromEvent($('body'), 'click')
.filter(function (e) {
  return $(e.target).is('.aClass div .something');
})
.subscribe(function () {...});

有什么辦法可以將jQuery綁定轉換為發射器，並在Rx中使用該事件流？ 最好的方法是什么？

Answer 1

看到http://jsfiddle.net/ktzk1bh3/2/

HTML：

<div class="aClass">
    <div>
        <a class="something">Click me</a>
    </div>
</div>

Javascript：

//Bind to 'body' but only respond to events from the binding above
var source = Rx.Observable.create(function(o) {
    $('body').on('click', '.aClass div .something', function(ev) {
        o.onNext(ev);
    })
});

var sub = source.subscribe(function(ev) { console.log("click", ev) });

Answer 2

您可以使用Rx.Observable.fromEventPattern 。

Rx.Observable.fromEventPattern(
  function add(handler) {
    $('body').on('click', '.aClass div .something', handler);
  },
  function remove(handler) {
    $('body').off('click', '.aClass div .something', handler);
  }
);

這樣，它將自動取消可觀察訂閱中取消訂閱的事件處理程序。

Answer 3

<div class='radios'>
  <input type='radio' name='r' value='PM'>PM
  <input type='radio' name='r' value='PCE'>PCE
  <input type='radio' name='r' value='PCS'>PCS
</div>
<textarea class='textarea'>

</textarea>

Rx.Observable.fromEvent(document.querySelector('.radios'),'click')
.subscribe((e)=>console.log(e.target.value));