Triggering events from one view to another

Question

I have two different ways of displaying my models on my site, and I handle them with different views of course.

However, I want to be able to connect these views somehow, such that when an event happens on one of the views on a specific model, it can also trigger an event on the other view.

For sake of simplicity, let's say that I have a collection and that I represent the collection with two views that generate identical ul lists. (In reality, the views are of course different).

HTML

<ul class="view-a">
    <li class="subview-a">Model 1</li>
    <li class="subview-a">Model 2</li>
</ul>

<ul class="view-b">
    <li class="subview-b">Model 1</li>
    <li class="subview-b">Model 2</li>
</ul>

Backbone

viewA = Backbone.View.extend({
    tagName: 'ul',
    className: 'view-a',
});

viewB = Backbone.View.extend({
    tagName: 'ul',
    className: 'view-b',
});

subViewA = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-a',
    events: {
         'mouseover':'over',
    },
    over: function() {
        console.log('mouse over on A');
    }
});

subViewB = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-b',
    events: {
        'mouseover':'over',
    },
    over: function() {
         console.log('mouse over on B');
    },
});

You might ask: Why not have the same subview? In this example both sub-views are li, but not in the actual implementation.

So how can I trigger the mouseover event on subview B when hovering over subview A, and vice-versa?

if the same model is rendered in both views, perhaps you could go through the model? maybe register both views with the model, and when an event occurs in one model, access the other with something like `this.model.get('subview-b')`? — jackwanders, Jun 28 '12 at 14:20
are both corresponding models in the subviews represented by the same Backbone Model? — jakee, Jun 28 '12 at 14:21

score 2 · Answer 1 · edited May 23 '17 at 11:56

Communicate with Backbone's event model. Trust me when I say this, but when using Backbone, try opt for a modular approach. In other words each view, even though might be related, should not depend on another view. It not only makes testing extremely difficult, it also makes it a nightmare to debug and leads to spaghetti code. Take a look at this article. It explains how views communicate with each-other using the Backbone's event model. You should be familiar with the PubSub pattern. This question is also related.

UPDATE! So If I take your example

var vent = _.extend({}, Backbone.Events);

subViewA = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-a',
    initialize: function () {
        vent.on('my-event', this.over, this);
    },
    events: {
         'mouseover':'over',
    },
    over: function(dataRecieved) {
        console.log('mouse over on A');
    }
});

subViewB = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-b',
    events: {
        'mouseover':'over',
    },
    over: function() {
         vent.trigger('my-event', "data you would like to pass");
    },
});

Will this be bound to a specific model of the collection though? It doesn't seem like it. I think this will cause ALL subviews to run `over`. I want it to be model specific — AlexBrand, Jun 28 '12 at 18:55
I am not sure what you mean by your subviews to run over? If you properly dispose of your views, you should have no problems with bindings and 'Zombie Views'. I mean if you want it to be specific to a model, let your views bind to the models change, reset, and all events. However, causing another view to react to a hover/over event from another view, I dont see a better way than what I have listed above. If there is I am all ears. — TYRONEMICHAEL, Jun 30 '12 at 09:16

Triggering events from one view to another

1 Answers1