Search code examples
javascriptchaplinjs

Using "mediator" as a sink in a listen-block routine


I have a ChaplinJS project built by someone else, and I'm not fully informed about certain details of the framework. Here's a bit which I'm finding tricky to grok:

listen: {
  'change model': 'render',
  'home:actionvideo mediator': 'show'
},

This block of code is inside of one of the view JS files. I'm familiar with this style of event-handling, my understanding is the first bit ("home:actionvideo") is the name of an event, the second part ("mediator") is an element selector, and the bit after the colon is the name of a function to run in reponse to the event.

But here in Chaplin-world, I'm thinking "mediator" actually refers to the Chaplin-core Chaplin.mediator object. Is this correct?

And while I'm at it, does that first line change model somehow listen to a Chaplin.model? Which Chaplin.model?


Solution

  • Yes, this is correct.

    is able to listen to the following methods:

    var MyView = Chaplin.View.extend({
    
      events: {
        // Listen to $ DOM events
        'click button': 'methodName',
        'change select#myid': 'methodName',
        ...
      },
    
      listen: {
        // Listen to Chaplin events
        'onAddedToDOM': 'methodName',
        ...
    
        // Listen to model events
        'change:foo model': 'methodName',
        // Listen to collection events
        'reset collection': 'methodName',
        // Custom mediator events (or Chaplin events, like router:route etc.)
        'pubSubEvent mediator': 'methodName',
        // The value can also be a function.
        'eventName': function() {alert('Hello!')}
      },
    

    Use the mediator class, to publish/ or subscribe to direct communication through controlled channels:

    this.publishEvent('pubSubEvent', ['Joe', 'Schmoe']);
    

    or outside your view:

    require('chaplin');
    
    Chaplin.mediator.publishEvent('pubSubEvent', ['Joe', 'Schmoe']);
    

    You can find the source code for event delegation here: https://github.com/chaplinjs/chaplin/blob/master/src/chaplin/views/view.coffee#L299-308