不同意見共享木偶vent.on

Question

你好，我有一個佈局視圖，有許多過濾器部分和一個集合。過濾器部分將在我的項目中共享，因此它們都會在觸發器中引用「filter：change」。

但是，我發現當我更改頁面並導致「過濾器：更改」時，我遇到了前一個查看通風口綁定被調用的問題（然後模板從dom中刪除）。

基本上，當我的佈局視圖關閉時，我需要解除事件「filter：change」，以便下一個layoutview可以獨佔訪問該觸發器。

當前代碼：

define([ 
    "text!app/templates/users/index.html", 
    'app/views/users/collection', 
    'app/views/users/partials/internal', 
    'app/views/users/partials/enabled', 
    'app/views/partials/location_id' 
], 
    function(Template, CollectionView, FilterInternalView, FilterEnabledView, FilterLocationIdView) { 
    "use strict" 

    return Backbone.Marionette.Layout.extend({ 


     template: Template, 


     regions: { 
     filterInternal: '#filterInternalContainer', 
     filterEnabled: '#filterEnabledContainer', 
     filterLocationId: '#filterLocationIdContainer', 

     collectionLatch: '#collectionLatch' 
     }, 


     initialize: function() { 

     // horrible scope issues with javascript 
     var that = this; 

     // if the filter change event is triggered in a sub view 
     MyApp.vent.on('filter:change', function() { 
      // fetch the collection and pass its filters through 
      that.renderCollection(that.getFilter()); 
     }) 
     }, 


     getFilter: function() { 

     // create our new filter object using jQuery picking the values 
     var filter = { 
      from: "0", 
      to: parseInt(100), 
      enabled: $('#filterEnabled').val(), 
      internal: $('#filterInternal').val(), 
      location_id: $('#filterLocationId').val() 
     }; 

     // passing it through a null stripper 
     filter = _.cleanNullFieldsFromObject(filter); 

     // set the filter object to local storage (extended, not typical) 
     localStorage.setObject('userFilter', filter); 

     return filter; 
     }, 


     renderFilterEnabled: function(options) { 
     this.filterEnabled.show(new FilterEnabledView(options)); 
     }, 


     renderFilterInternal: function(options) { 
     this.filterInternal.show(new FilterInternalView(options)); 
     }, 


     renderFilterLocationId: function(options) { 
     this.filterLocationId.show(new FilterLocationIdView(options)); 
     }, 


     renderCollection: function(options) { 
     // render the post list 
     this.collectionLatch.show(new CollectionView(options)); 
     }, 


     onRender: function() { 

     // do we need to over write the filter object from local storage? 
     var userFilter = localStorage.getObject('userFilter'); 

     // if local storage isn't empty then over ride the filter with it 
     if (!_.isEmpty(userFilter)) { 
      this.filter = userFilter; 
     } else { 
      this.filter = this.getFilter(); 
     } 

     // render the filters on our page 
     this.renderFilterEnabled(this.filter); 
     this.renderFilterInternal(this.filter); 
     this.renderFilterLocationId(this.filter); 

     // render the collection 
     this.renderCollection(this.filter); 
     }, 


     onClose: function() {} 


    }) 
    }) 

//局部視圖

define(["marionette", "text!app/templates/partials/location_id.html", 'app/models/location'], 
    function(Marionette, Template, Model) { 
    "use strict" 
    return Backbone.Marionette.ItemView.extend({ 
     template: Template, 


     events: { 
     'change #filterLocationId': 'onFilter' 
     }, 


     initialize: function(options) { 
     this.value = _.isEmpty(options) ? '-' : options.location_id; 
     }, 


     onFilter: function() { 
     MyApp.vent.trigger('filter:change'); 
     }, 


     serializeData: function() { 
     return {values: new Model().getIds(), value: this.value}; 
     } 


    }) 
    }) 

我看着文檔：https://backbonemarionette.readthedocs.org/en/latest/marionette.eventbinder.html#unbind-a-single-event

，並試圖：

onClose: function() { 
    MyApp.vent.off('filter:change'); 
    } 

但沒有亞光呃什麼，即使下一個視圖重新開啓發布，該事件也不起作用。

Answer 1

嘗試改變：

MyApp.vent.on('filter:change', function() { 
    // fetch the collection and pass its filters through 
    that.renderCollection(that.getFilter()); 
}) 

通過

this.listenTo(MyApp.vent, 'filter:change', function() { 
    // fetch the collection and pass its filters through 
    that.renderCollection(that.getFilter()); 
})