1

有很多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 一起使用？最好的方法是什么？

4

3 回答 3

8

见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) });
于 2014-12-04T21:43:04.953 回答
3

您可以使用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);
  }
);

这样，它将自动从可观察订阅中删除取消订阅的事件处理程序。

于 2016-05-05T17:53:22.127 回答
0 

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

于 2017-10-27T21:27:25.157 回答