How can i call function on view on the click event of Id, function is written on controller in backbone.js

Question

My controller code is here .

spine.module("communityApp", function (communityApp, App, Backbone, Marionette, $, _) {
  "use strict";


  communityApp.Controllers.pforumController = Marionette.Controller.extend(
    {
      init: function(){
        var func = _.bind(this._getpforum, this);
        var request = App.request('alerts1:entities' , {origin:'pforum'});
        $.when(request).then(func)

      },
      _getpforum:function(data){
        var pforumCollectionView = new communityApp.CollectionViews.pforumCollectionViews({
          collection: data
        });
        communityApp.activeTabView = pforumCollectionView;

        // Populating the data
        communityApp.activeTabLayout.pforum.show(pforumCollectionView);

      },



    }); 

  });

view code is here

spine.module("communityApp", function (communityApp, App, Backbone, Marionette, $, _) {

  // Load template
  var a;
  var pforumTemplateHtml = App.renderTemplate("pforumTemplate", {}, "communityModule/tabContainer/pforum");
  // Define view(s)
  communityApp.Views.pforumView = Marionette.ItemView.extend({
    template: Handlebars.compile($(pforumTemplateHtml).html()),
    tagName: "li",
    onRender: function () {
      this.object = this.model.toJSON();
    },




    events: {
      "click #postcomment" : "alrt",
      "click #recent-btn": "recent",
      "click #my-posts": "myposts",
      "click #popular-btn": "popular",
      "click #follow-btn": "follow",
      "click #my-posts": "LeftLinks",
      "click #popular-btn": "LeftLinks",
      "click #follow-btn": "LeftLinks"

    },

    postcomments : function ()

    {
      $("#recent-post-main-container").hide();
      $("#recent-post-main-container2").show();

    },

    alrt : function ()
    {
      alert ("In Progress ......");
    },



    showCommentEiditor : function (){

      $(".comment-popup-container").show();
      $(".comment-txt-area").val('');

    },

    showPforumTab : function ()
    {
      $("#recent-post-main-container2").show();
      $("#recent-post-main-container").hide();
    },

    showComments : function(){

      $("#loading").show();
      $(".tab-pane").hide();
      $(".left-content").hide();
      $("#recent-post-main-container2").show();
      //$(".left-content-commentEditor").show();
      $(".comm-tab-content-container").css('height','200px');
      $(".comment-txt-area").val('');
      $(".left-content-comment").show();
    },

    hideCommentPopup : function ()
    {
      $("#public-question-comment").hide();
    },
    // Show Loading sign
    showLoading : function () {
      $('#loading').show();
    },

    // UnLoading Function
    hideLoading : function (){
      $('#loading').hide();
    },

    // Add New Event Function
    addEvent : function()
    {
      //$("#name").val(getBackResponse.user.FullName);
      //$("#phone").val(getBackResponse.user.CellPhone);
      //$("#email").val(getBackResponse.user.UserName);
      $(".overly.addevent").show();
      $('#lang').val(lat);
      $('#long').val(long);
      document.getElementById("my-gllpMap").style.width = "100%";
      var my_gllpMap = document.getElementById("my-gllpMap");
      google.maps.event.trigger( my_gllpMap, "resize" );
    },

    setValues : function(key,value)
    {
      window.localStorage.setItem(key,value);       
    },

    getValues : function (key) 
    {
      return window.localStorage.getItem(key);      
    },

    closeAddEvent:function ()
    {
      $(".overly.addevent").hide();
    },

    // Show Over lay
    showOverly:function ()
    {
      $('.overly-right-tab').show();
    },

    // Hide Loading sign
    hideOverly : function()
    {
      $('.overly-right-tab').hide();
    },

    LeftLinks: function (e) {

      var elem = $(e.target).closest('a');

      var elem = $(e.target).closest('a');
      var event = elem.attr('name');
      switch (event) {
      case "myposts":
        var _this = $.extend({}, this, true);
        _this.event = 'myposts';
        this.LinkUrl.call(_this);
        //$("#my-posts").addClass('active');
        //$("#public-fourm-top-tab").addClass('TabbedPanelsTabSelected');
        //$(".types").removeClass('active');

        break;
      case "recents":
        var _this = $.extend({}, this, true);
        _this.event = 'recents';
        this.LinkUrl.call(_this);
        $(".types").removeClass('active');
        $("#recent-btn").addClass('active')
        //$("#pforum").removeClass('active');
        // $("#recent").addClass('active');
        break;
      case "populars":
        var _this = $.extend({}, this, true);
        _this.event = 'populars';
        this.LinkUrl.call(_this);
        $(".types").removeClass('active');
        $("#popular-btn").addClass('active')
        // $("#pforum").removeClass('active');
        //$("#popular").addClass('active');
        break;
      case "follows":
        var _this = $.extend({}, this, true);
        _this.event = 'follows';
        this.LinkUrl.call(_this);
        $(".types").removeClass('active');
        $("#follow-btn").addClass('active')
        break;
      }

    },

    LinkUrl: function (modalThis) {

      communityApp.activeTabView.collection = []; // currently empty data
      communityApp.activeTabView.render();
      className: 'comm-main-container'
      // uncomment these lines when getting data fro web service route, it will repopulate the data

      var func = _.bind(function (data) {

        communityApp.activeTabView.collection = data;
        communityApp.activeTabView.render();
      }, this);

      switch (this.event) {
      case "myposts":
        $.when(App.request('alertLinks:entities', {
          origin: 'pforum', 
          event: this.event

        })).then(func);
        break;
      case "recents":
        $.when(App.request('alertLinks:entities', {
          origin: 'pforum',

          event: this.event
        })).then(func);
        break;
      case "populars":
        $.when(App.request('alertLinks:entities', {
          origin: 'pforum',
          origin1:'popular',
          event: this.event
        })).then(func);


        break;
      case "follows":
        $.when(App.request('alertLinks:entities', {
          origin: 'pforum',

          event: this.event
        })).then(func);
        break;
      }


      return true;



    }


  });

  // define collection views to hold many communityAppView:
  communityApp.CollectionViews.pforumCollectionViews = Marionette.CollectionView.extend({
    tagName: "ul",
    itemView: communityApp.Views.pforumView
  });

});

Answer 1

Whenever I need to share an event between a view and controller I usually wire up the listeners within the module that instantiates the controller. This example is a bit contrived, but it gets the point across. The full working code is in this codepen . The relevant bit is copied here. Notice the line this.listenTo(view, 'itemview:selected', this.itemSelected); where the view's event triggers a method on the controller.

App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _) {

  // Define a controller to run this module
  // --------------------------------------

  var Controller = Marionette.Controller.extend({

    initialize: function(options){
      this.region = options.region
    },

    itemSelected: function (view) {
      var logView = new LogView();
      $('#log').append(logView.render('selected:' + view.cid).el);
    },

    show: function(){
      var collection = new Backbone.Collection(window.testData);

      var view = new CollectionView({
        collection: collection    
      });

      this.listenTo(view, 'itemview:selected', this.itemSelected);

      this.region.show(view);
    }

  });


  // Initialize this module when the app starts
  // ------------------------------------------

  Mod.addInitializer(function(){
    Mod.controller = new Controller({
      region: App.mainRegion
    });
    Mod.controller.show();
  });
});

The other way to accomplish this, if you cannot wire it all up within the same module, is to use Marionette's messaging infrastructure. For example, you can use the application's event aggregator to pass events around.