Trigger custom event in Rx JS

Question

I'm trying to understand Reactive JS. In JQuery I can trigger custom events as

$(document).bind('eventbus', function(e, d) { console.log(d);});
$(document).trigger('eventbus', 'test');

and pass around data (i.e. 'test'). It's not clear how to do this in RxJS. I could try to convert the jquery events as

var observable = $(document).ToObservable('eventbus');

but observable returns the event object but not my data object. How do I trigger custom events with data using RxJS? Do I always need to piggyback on some other event type? My goal is to create a simple eventbus using RxJS.

Answer 1

Even so your question is a bit old and already answered I would like to share my opinion with you.

You mentioned that you want to have your custom events as Observables. For custom events, there is no need to use jQuery at all when what you really want to have is not an event but an Observable. I like to think of an Observable as an event on steroids. So in your component that you would like to expose the Observable, why not use RxJS directly rather than indirectly like so:

function Component(){
    var self = {};
    var subject = new Rx.Subject();

    //raise notifications this way
    //subject.OnNext("myData"); //could be anything, a string, an object, whatever

    self.getObservableSomething = function(){
        return subject.AsObservable();
    }
    return self;
}

Once you started using Rx you will notice that any event could actually be an Observable. In fact, in F# for example, IEvent derives from IObservable.

In addition you reduce tieing to different frameworks when you remove the jQuery part.