Javascript 在另一个Marionette.ItemView中调用函数

我有一个ItemView，在这里我使用clearSearch函数。我需要在另一个ItemView中调用相同的函数，所以为了保持干燥，我尝试调用clearSearch，但没有成功

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

我还尝试使用View.Panel.clearSearch，但出现以下错误：

未捕获类型错误：对象函数{return i.applythis，arguments} 没有方法“clearSearch”

.

使用事件

定义全局事件总线：

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

在分页视图中

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

在面板视图中，侦听此事件，并定义如何处理它

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

我对木偶没有任何经验。可能有更简单的方法用木偶来实现这一点，但这是我在纯香草主干应用程序中使用的模式。

使用事件

定义全局事件总线：

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

在分页视图中

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

在面板视图中，侦听此事件，并定义如何处理它

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

---

我对木偶没有任何经验。可能有更简单的方法用木偶来实现这一点，但这是我在纯香草主干应用程序中使用的模式。

使用木偶，您也可以在该视图中使用激发事件。例如：

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

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

---

使用木偶，您还可以在该视图上使用该火灾事件。例如：

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

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