Backbone + RequireJS + Mediator Pattern resulted in View Logic short-circuiting and infinite looping

Question

I am currently using Backbone.Mediator to leverage the benefit of Mediator Pattern in my Backbone + RequireJS project; however, I encountered a peculiar behaviour of the Pattern which am not so sure whether it's "by-design", or rather, not the standard behaviour of Mediator Pattern but a bug in the plugin.

As a contrived example:

AMD Module 1

var View1 = Backbone.View.extend({
    ...
    events: {
        'click div: switchList'
    },
    switchList: function() {
        Backbone.Mediator.pub('list:switch');
    }
});

AMD Module 2

var View2 = Backbone.View.extend({
    ...
    subscriptions: {
        'list:switch': 'shrinkDiv'
    },
    shrinkDiv: function() {
        Backbone.Mediator.pub('div:shrink');
        this.shrinkAndMore();
    }
});

return View2;

AMD Module 3

define(function(require) {
    var View2 = require(**AMD Module 2**);

    var View3 = Backbone.View.extend({
        ...
        subscriptions: {
            'div:shrink': 'createSiblingDiv'
        },
        createSiblingDiv: function() {
            this.siblingView = new View2();
            this.$el.after(this.siblingView.$el);
            this.siblingView.render();
        }
    });
});

I thought it would work like this:

                      **View1**.switchList();
                      │
Channel 'list:switch' │
                      ↓
                      **View2**.shrinkDiv();
                      │
                      ├─┐
                      │ │ Channel 'div:shrink'
                      │ ↓
                      │ **View3**.createSiblingDiv();
                      │ │
                      │ └──→ "SiblingDiv created and rendered"
                      │
                      └────→ "View2 Div shrinked and more"

However, the truth is since SiblingDiv is another instance of View2 which subscribes to Channel 'list:switch', SiblingDiv, immediately after its creation, will also be triggered by the event signal still transpiring over Channel 'list:switch' (which will only cease after the execution of **View2**.shrinkAndMore();).

So the real code flow looks like this:

                      **View1**.switchList();
                      │
Channel 'list:switch' │
                      ↓
                      **View2**.shrinkDiv(); ←──────────────────┐
                      │                                         │
                      ├─┐                                       │
                      │ │ Channel 'div:shrink'                  │
                      │ ↓                                       │
                      │ **View3**.createSiblingDiv();           │
                      │ │                                       │
                      │ └──→ "SiblingDiv created and rendered" ─┘
                      │
                      └────→ "View2 Div shrinked and more"

An infinite loop... Ooops!

I was able to make things working my way with some modifications to my code:

AMD Module 2 Modded

var View2 = Backbone.View.extend({
    initialize: function() {                                 // new code
        if (this.options.subscriptions) {                    // new code
            this.subscriptions = this.options.subscriptions; // new code
        }                                                    // new code
    },                                                       // new code
    ...
    subscriptions: {
        'list:switch': 'shrinkDiv'
    },
    shrinkDiv: function() {
        Backbone.Mediator.pub('div:shrink');
        this.shrinkAndMore();
    }
});

return View2;

AMD Module 3 Modded

define(function(require) {
    var View2 = require(**AMD Module 2**);

    var View3 = Backbone.View.extend({
        ...
        subscriptions: {
            'div:shrink': 'createSiblingDiv'
        },
        createSiblingDiv: function() {
            this.siblingView = new View2({        // new code
                subscriptions: {}                 // new code
            });                                   // new code
            this.$el.after(this.siblingView.$el);
            this.siblingView.render();
        }
    });
});

But I am very interested to understand that whether the infinite looping behaviour (new Object created during an event signal broadcasting will also be triggered by that very signal) is considered "standard" in Mediator Pattern methodology? Or is this all just a bug on the plugin part?

Answer 1

Seems this is a bug in the plugin. Take a look a this line. It will loop over all events that was registered in this channel. The problem is that it stops when every registered events are called and that it checks for the lengths of the array of the registered events in every loop step. So whats happens is:

1. you fire the event
2. your registered event is called
3. an new instance is created and register itself to the channel
4. this increase the length of the array by one
5. so instead of ending the loop it will call the listener of the just created view
6. go back to 3.

Changing the line to:

for (var i = 0, l =  channels[channel].length; i < l; i++) {

should fix this cause you get the length of the array at the beginning. Adding new element will not end in an infinit loop.