Call a function in another Marionette.ItemView

Question

I have one ItemView, where I use clearSearch() function. I need to call the same function in another ItemView, so to keep it DRY I tried to call clearSearch(), but i didn't work.

View.Panel = Marionette.ItemView.extend({
    template: panelTpl,
    events: {
        'click .search_clear': 'clearSearch',
    }
    clearSearch: function() {
        //some important actions
    }
});

View.Pagination = Marionette.ItemView.extend({
    template: paginationTpl,
    events: {
        'click .page': 'changePage'
    },
    changePage: function(e) {
        //others important actions
        clearSearch();
    }
});

I also tried to use View.Panel.clearSearch(), but I've got this error:

Uncaught TypeError: Object function (){return i.apply(this,arguments)} has no method 'clearSearch'

.

Answer 1

use events.

define a global event bus:

Event.Dispatcher = _.clone(Backbone.Events);

and in your pagination view.

View.Pagination = Marionette.ItemView.extend({
  template: paginationTpl,
  events: {
    'click .page': 'changePage'
  },
  changePage: function(e) {
    //notify page change event
    Event.Dispatcher.trigger("pageChanged", [pass any data you want to pass]);
  }
});

in your panel view, listen to this event, and define how to handle it.

View.Panel = Marionette.ItemView.extend({
  template: panelTpl,
  events: {
    'click .search_clear': 'clearSearch',
  },
  initialize: function() {
    //listen to that event
    this.listenTo(Event.Dispatcher, 'pageChanged', this.clearSearch);
  },
  clearSearch: function() {
    //some important actions
  }
});

I don't have any experience with Marionette. There may be easier ways to implement this with Marionette, but this is the pattern I've been using in my pure vanilla backbone applications.

Answer 2

With Marionette you can also use Triggers that fire events on that view. For example:

View.Panel = Marionette.ItemView.extend({
    template: panelTpl,
    triggers: {
       'click .search_clear': 'panel:clearSearch'
    }
});

myPanel.on('panel:clearSearch', function(args){
    //some important actions
});