Backbone + RequireJS + Mediator Pattern led to short circuit and View Logic

I am currently using Backbone.Mediator to take advantage of the reseller template in the Backbone + RequireJS project; however, I came across a peculiar behavior of the Template, which is not so sure that it is "in design", or rather, not the standard behavior of the intermediary template, but an error in the plugin.

As a far-fetched example:

AMD 1 module

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

AMD 2 module

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

return View2;

AMD 3 module

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"

, , SiblingDiv - View2, Channel 'list: switch', SiblingDiv, , : switch '( **View2**.shrinkAndMore();).

, :

                      **View1**.switchList();
                      β”‚
Channel 'list:switch' β”‚
                      ↓
                      **View2**.shrinkDiv(); ←──────────────────┐
                      β”‚                                         β”‚
                      β”œβ”€β”                                       β”‚
                      β”‚ β”‚ Channel 'div:shrink'                  β”‚
                      β”‚ ↓                                       β”‚
                      β”‚ **View3**.createSiblingDiv();           β”‚
                      β”‚ β”‚                                       β”‚
                      β”‚ └──→ "SiblingDiv created and rendered" β”€β”˜
                      β”‚
                      └────→ "View2 Div shrinked and more"

... Ooops!

:

AMD 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 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();
        }
    });
});

, ( , ) ) "" Mediator Pattern? ?

+5
1

, . . , . , , , . , :

  • 3.

:

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

, . .

+5

All Articles