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'

回答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.

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

来源：https://stackoverflow.com/questions/20181679/call-a-function-in-another-marionette-itemview

标签

javascript

backbone.js

marionette