CODEWITHSUNDEEP
javascriptbackbone.jsmarionette
Ladislav M
Ladislav M

Reputation: 2187

Call a function in another Marionette.ItemView

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'

.

Upvotes: 1

Views: 2924

Answers (2)

rekarnar
rekarnar

Reputation: 463

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
});

Upvotes: 2

Yurui Zhang
Yurui Zhang

Reputation: 2232

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.

Upvotes: 3

Related Questions