Question

我有一个ItemView，我使用clearSearch（）函数。我需要在另一个ItemView中调用相同的函数，所以为了保持DRY我试着调用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()，但我遇到了这个错误：

Uncaught TypeError：Object function（）{return i.apply（this，arguments）} 没有方法'clearSearch'

Answer 1

使用事件。

定义全局事件总线：

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

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

Answer 2

使用Marionette，您还可以使用Triggers在该视图上触发事件。例如：

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

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

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

2 个答案: