Event handlers in tags still get run after unmounting tag

[wmnnd]

Hi there, it seems that when unmounting a tag in Riot (and after the unmount event has been triggered by Riot), RiotControl still executes event handlers for stores events within that tag:

This means, if you have something like this in a tag

RiotControl.on("some_event", function(data) {
    //do something here
}

… the function will still get triggered even after unmounting the tag.

This problem seems to be a bit old, and so since there is no response, I'm leaving this comment for anyone else that may run into something similar. I ran into a related issue today, although I don't believe that this particular issue, or my specific issue, is a problem with RiotControl per se, but rather an understanding issue with Riot.

Firstly, the issue raised here: when unmounting a tag in Riot, the event handlers for triggered RiotControl events are still executed. This seems to be due to the fact that the event handler is passed as an argument to RiotControl, and with functions being what they are in JS, the function exists outside of the scope of the Riot tag that the function is defined in. Or in case I'm flying a little off course with that explanation, this in the context of the event handler function actually refers to the data store object and not the Riot tag.

So when unmounting your Riot tag, provide an unmount Riot handler and use it to do a RiotControl.off(...). Works exactly the same as for Riot observables (in fact, thats probably where you should be looking for assistance :) ). And while we're on the subject, I personally tend to find it more appropriate to introduce the RiotControl listeners in the 'mount' event on a Riot tag. So something like the following:

<script>
  var self = this
  this.on('mount', function(){
    RiotControl.on('my-datastore-event', function(){
      //do something
    })
  })

  this.on('unmount', function(){
    RiotControl.off('my-datastore-event')
  })
<script>

This actually results in another subtle problem: using RiotControl.off() seems to turn the listener off completely. So for example, assuming you have 2 Riot tags mounted, both doing something when some RiotControl store event is triggered. After un-mounting the one tag using the above code snippet, the event is no longer emitted by the RiotControl store. Since the second tag has already been mounted, there is no way to 'turn the event emission from the RiotControl store on again'. There are hacky, horrible ways around it, but those can actually be avoided by understanding the way Riot implements its observables. and so again, this stems from Riot I believe and not RiotControl. So to ensure that all tags work correctly, responding when they need to and removing the handlers correctly when the tag is unmounted, the above snippet can be updated as follows:

<script>
  var self = this

  my_handler_function() {
    //do something here
  }

  this.on('mount', function(){
    RiotControl.on('my-datastore-event', self.my_handler_function)
  })

  this.on('unmount', function(){
    RiotControl.off('my-datastore-event', self.my_handler_function)
  })
<script>

Notably, the function define is no longer 'inline' as the second arg to RiotControl.on(), primarly because its needed as the second arg to RiotControl.off(). This removes only my_handler_function from the RiotControl store event handlers when 'my-datastore-event' is emitted.

Hope that makes some sense, and helps someone else.

[aRandomKiwi]

Thanks for this very usefull explanation, step by step !

[tooolbox]

@wetwiper This should be in the readme or something :)

[avimar]

I know this is trivial, but is there some way to remove this replication?