Question

有许多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

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

<div>{{ 'HELLO' | translate:param }}</div>

如何设置Rx.Observable.fromEvent以使用jQuery过滤事件

3 个答案: