Unsubscribe observable in one tag disables all?

Question

I have built a SPA with Riot.js that visualizes data that is received by a proprietary messaging system. In order to make the tags react to changes, I created a global observable (riot.ob) in the riot context that triggers a message when a new values are received from the server:

riot.ob.trigger('valueUpdate', stationId, datapointId, value);

There are many different tags that subscribe to this event and trigger an update, if the message is meant for this tag:

riot.ob.on('valueUpdate', function (stationId, datapointId, value) {
    if (stationId == self.stationId && datapointId == self.datapoint.id) {
        self.value = value;
        self.update();
    }
});

That works quite well. The problem arises when I navigate within my application, which means I need to unmount tags in a specific area and mount something else. When I unmount a tag like the above, I need to unsubscribe the valueUpdate event, so I use this:

this.on('unmount', function () {
    riot.ob.off('valueUpdate');
})

But now all other tags that are still mounted somewhere else are automatically unsubscribed as well and don't listen to this valueUpdate event any more. How can I unsubscribe a single tag's event handler function only? Do I have to create a named function and pass it to riot.ob.off('valueUpdate'); somehow?

Answer 1

According to source code of method off you should pass a callback function that you want to unsubscribe as the second param. Otherwise, all listeners will be deleted.

Next code should work as you expect:

var callback = function (stationId, datapointId, value) {
    if (stationId == self.stationId && datapointId == self.datapoint.id) {
        self.value = value;
        self.update();
    }
}

riot.ob.on('valueUpdate', callback);

this.on('unmount', function () {
    riot.ob.off('valueUpdate', callback );
})