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() {
if (this.options.subscriptions) {
this.subscriptions = this.options.subscriptions;
}
},
...
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({
subscriptions: {}
});
this.$el.after(this.siblingView.$el);
this.siblingView.render();
}
});
});
, ( , ) ) "" Mediator Pattern? ?