Marionette beim Hinzufügen eines Elements zur Sammlung Ereignis wird zweimal ausgelöst

Question

Ich benutze Marionette 2.4 und haben ein LayoutView, die auf ein Ereignis in der ChildView gehört. Wenn das Ereignis ausgelöst wird, suche ich nach einem vorhandenen Modell in der Sammlung und wenn es nicht dort ist, erstelle ich ein neues Modell und füge es der Sammlung hinzu. Wenn es gefunden wird, entferne ich das Modell aus der Sammlung. Das Problem ist, dass das Ereignis zweimal zu feuern scheint. Wenn es zum ersten Mal ausgelöst wird, wird das Modell erstellt. Wenn es jedoch zweimal ausgelöst wird, sucht es das neu erstellte Modell in der Sammlung und entfernt es anschließend.

var layout = Marionette.LayoutView.extend({ 
    childEvents: { 
    'channel:selected': 'onChildviewChannelSelected' 
    }, 
    onChildviewChannelSelected: function (childView, args) { 
    var linkCollection = this.getRegion('regionWithCollectionView').currentView.collection; 
    var modelToUpdate = linkCollection.where({channel: args.currentTarget.value}); 
    if(modelToUpdate) { 
     this.removeModel(linkCollection, modelToUpdate); 
    } else { 
     this.addModel(linkCollection, args.currentTarget.value); 
    } 
    }, 
    removeModel: function (collection, model) { 
    collection.remove(model); 
    }, 
    addModel: function (collection, channel) { 
    var newEntity = new MyApp.Entities.Link(); 
    newEntity.set('channel', channel); 
    collection.add(newEntity); 
    } 
}); 

und hier ist das Kind Ansicht, dass die Brände ‚Kanal: ausgewählt‘ Ereignis ....

var childView = Marionette.ItemView.extend({ 
    events: { 
     'change input[type="checkbox"]': 'channelSelected' 
    }, 
    channelSelected: function(args) { 
     this.triggerMethod('channel:selected', args); 
    } 
}); 

Jede Idee, warum der childView den ‚Kanal: ausgewählt‘ feuert zweimal Ereignis?

Es ist nicht die Ansicht, die die Sammlung enthält, die hinzugefügt wird, aber vielleicht passiert etwas, wenn eine Sammlung hinzugefügt wird, die das Ereignis aus irgendeinem Grund erneut auslöst.

Answer 1

Es sieht so aus, als ob Ihre Funktion wegen Marionettes "childview * event bubbling" zweimal ausgelöst wird. Aus der Dokumentation:

Wenn ein Kind Ansicht innerhalb einer Sammlung Ansicht, die ein Ereignis auslöst, dass Ereignis wird sprudeln durch die übergeordnete Sammlung Ansicht mit „childview:“ vorangestellt auf die Ereignisnamen.

Das heißt, wenn eine untergeordnete Ansicht "do: something" auslöst, löst die übergeordnete Sammlungsansicht "childview: do: something" aus.

Das bedeutet, dass "childview:channel:selected" bereits auf Ihrem layoutview ausgelöst wird (was bedeutet, dass die onChildviewChannelSelected Funktion automatisch auf der übergeordneten Ansicht ausgeführt, wenn es http://marionettejs.com/docs/v2.4.7/marionette.functions.html#marionettetriggermethod vorhanden ist).

Es scheint, dass es einige potenzielle Problemumgehungen gibt. 1 - Geben Sie keinen childEvents Handler an, wenn Ihr Handler/Funktionsname den Marionettenkonventionen entspricht.

var LayoutView = Marionette.LayoutView.extend({ 
    template: false, 
    el: '.container', 
    regions: { 
    'regionWithCollectionView': '.collection-view-container' 
    }, 
    onChildviewChannelSelected: function (childView, args) { 
    console.log("layoutview::channelSelected - child " + childView.model.get('channel') + " selected"); 
    } 
}); 

Fiddle zeigt Abhilfe # 1: https://jsfiddle.net/kjftf919/

2 - Ihre Umbenennen LayoutView die childview Funktion Handler auf etwas, das nicht mit Marionette automatisches Ereignis sprudelnden kollidiert.

var LayoutView = Marionette.LayoutView.extend({ 
    template: false, 
    el: '.container', 
    regions: { 
    'regionWithCollectionView': '.collection-view-container' 
    }, 
    childEvents: { 
    'channel:selected':'channelSelected' 
    }, 
    channelSelected: function (childView, args) { 
    console.log("layoutview::channelSelected - child " + childView.model.get('channel') + " selected"); 
    } 
}); 

Fiddle zeigt Abhilfe # 2: https://jsfiddle.net/kac0rw6j/