Calling view function from another view - Backbone
I have the following views in my application. Basically I want to call show_house() in App.MapView when the li of the App.HouseListElemView is clicked. 

What would be the best way of doing this?


    App.HouseListElemView = Backbone.View.extend({
        tagName: 'li',
        events: {
            'click': function() {
                // call show_house in App.MapView
            }
        },
        initialize: function() {
            this.template = _.template($('#house-list-template').html());
            this.render();
        },
        render: function() {
            var html = this.template({model: this.model.toJSON()});
            $(this.el).append(html);
        },   
    });
    
    App.MapView = Backbone.View.extend({
       el: '.map',
       events: {
           'list_house_click': 'show_house',
       },
       initialize: function() {
           this.map = new GMaps({
               div: this.el,
               lat: -12.043333,
               lng: -77.028333,   
           });
           App.houseCollection.bind('reset', this.populate_markers, this);
       },
       populate_markers: function(collection) {
           _.each(collection.models, function(house) {
                var html = 'hello'
                this.map.addMarker({
                    lat: house.attributes.lat,
                    lng: house.attributes.lng,
                    infoWindow: {
                        content: html,
                    }                
                });
           }, this);
       },
       show_house: function() {
           console.log('show house');
       }
    });
Calling view function from another view - Backbone
===

I have the following views in my application. Basically I want to call show_house() in App.MapView when the li of the App.HouseListElemView is clicked. 

What would be the best way of doing this?


    App.HouseListElemView = Backbone.View.extend({
        tagName: 'li',
        events: {
            'click': function() {
                // call show_house in App.MapView
            }
        },
        initialize: function() {
            this.template = _.template($('#house-list-template').html());
            this.render();
        },
        render: function() {
            var html = this.template({model: this.model.toJSON()});
            $(this.el).append(html);
        },   
    });
    
    App.MapView = Backbone.View.extend({
       el: '.map',
       events: {
           'list_house_click': 'show_house',
       },
       initialize: function() {
           this.map = new GMaps({
               div: this.el,
               lat: -12.043333,
               lng: -77.028333,   
           });
           App.houseCollection.bind('reset', this.populate_markers, this);
       },
       populate_markers: function(collection) {
           _.each(collection.models, function(house) {
                var html = 'hello'
                this.map.addMarker({
                    lat: house.attributes.lat,
                    lng: house.attributes.lng,
                    infoWindow: {
                        content: html,
                    }                
                });
           }, this);
       },
       show_house: function() {
           console.log('show house');
       }
    });