Polymer: Rückruf VS Ereignis

Question

Ich habe eine Frage in meinem Kopf seit heute Morgen und ich kann die Lösung nicht finden.

Ich habe zwei Vorlagen mit Polymer gebaut.

Die Frage ist: Was ist die bessere Lösung, um sie beide kommunizieren zu lassen? Rückruf oder Ereignis? Und warum?

Beispiel:

Ich habe ein Element (my-param-vehcle), die es Ihnen ermöglichen, ein Radio (ein Fahrzeug oder eine Fahrzeuggruppe) zu wählen, und öffnet sich ein Dialog. Wenn Sie auf den "Senden" -Button im Dialog klicken, wenn Ihre Wahl "Fahrzeug" war, wird es ein Ereignis zurücksenden, wenn Ihre Wahl "Fahrzeuggruppe" war, wird es einen Rückruf verwenden.

Was ist die bessere Lösung, und warum?

Vielen Dank!

das erste Element:

<dom-module id="my-param-vehicle"> 
    <style></style> 

    <template> 
    <div> 
     <paper-radio-group on-iron-activate="_setVehicleOrGroup"> 
     <paper-radio-button name="Vehicle">[[i18n("vehicles")]]</paper-radio-button> 
     <paper-radio-button name="VehicleGroup">[[i18n("vehiclesGroup")]]</paper-radio-button> 
     </paper-radio-group> 
    </div> 
    <my-dialog-selector id="dialog"></my-dialog-selector> 
    </template> 

    <script> 
    Polymer({ 
     is: 'my-param-vehicle', 

     created : function() { 
     this.i18n = i18n.getInstance(); 
     }, 

     ready : function ready() { 
     this.addEventListener("vehicle-selected", this._processVehicles.bind(this)); 
     }, 

     _setVehicleOrGroup : function _setVehicleOrGroup (e) { 
     var itemName = e.detail.item.name; 

     if (itemName == "Vehicle") { 
      var dialogType = "Vehicle", 
       params = { 
       "setData" : true, 
       "type" : "Vehicle", 
       "event" : "vehicle-selected" 
       }; 

     } else if (itemName == "VehicleGroup") { 
      var dialogType = "entityGroup", 
       params = { 
       "setData" : true, 
       "type" : "vehicleGroups", 
       "cb" : this._processGroup.bind(this) 
       }; 
     } 

     this.$.dialog.setData(dialogType, (params || false)); 
     }, 

     _processGroup : function _processGroup (e) { 
     // do stuff 
     }, 

     _processVehicles : function _processVehicles (e) { 
     // do stuff 
     } 
    }); 
    </script> 
</dom-module> 

der Dialog:

<dom-module id="my-dialog-selector"> 
    <style></style> 

    <template> 
    <div class="buttons"> 
     <paper-button id="okButton" on-click="_send" disabled>[[i18n("validate")]]</paper-button> 
    </div> 
    </template> 

    <script> 
     Polymer({ 
     is: 'my-dialog-selector', 

     created : function() { 
      this.i18n = i18n.getInstance(); 
     }, 

     setData : function setData (type, params) { 
      this.dataType = params.type; 

      if (params.cb) { 
      this.callback = params.cb; 
      } 

      if (params.event) { 
      this.eventName = params.event; 
      } 

      this._setGroupsList(params.type); 
     }, 

     _send : function _send() { 

      if (this.callback) { 
      this.callback("CALLBACK"); 
      } 

      if (this.eventName) { 
      this.fire(this.eventName, "EVENT"); 
      } 
     }, 

     }); 
    </script> 

</dom-module> 

Answer 1

Offensichtlich gibt es keine harte und schnelle Regel aber ich glaube, die beste Praxis für Polymer Verwendung des „Niederschlagsmuster“ ist, wobei Daten, die den Baum (von der Wurzel bis zum Blatt) durchlaufen, werden über Eigenschaften gesendet, und Daten, die den Baum hinaufgehen, werden über Ereignisse gesendet.

Um Ihre Frage zu beantworten, würde die vorgeschriebene Aktion Ereignis verwenden.

Was das Warum betrifft, gibt es viel klügere Leute als ich, die das beantworten könnten, aber da sie nicht antworten, werde ich es versuchen.

Einseitige Bindung ist ziemlich einfach und eignet sich gut für die Art und Weise, wie der Browser dom-Elemente verarbeitet. Und Ereignisse sind ein existierender (d. H. Nativer) Mechanismus zum Aufblähen von Nachrichten. Das Mantra von Polymer ist "Benutze die Plattform", so dass dieser Mechanismus gut zu diesem Zweck funktioniert.

Doppelte Bindung auf der anderen Seite ist kompliziert und teuer, sowohl in Bezug auf das Beobachten/Reflektieren/Benachrichtigen des DOMs von Änderungen als auch logisch schwer zu verstehen (welches Merkmal ändert welche Variable und wann).

Es dauert nicht lange, sich in die Jagd zu verirren, warum das Abzeichen in der Nav-Komponente immer den alten Wert annimmt, wenn Sie es beim Lesen der Nachricht in der Reader-Komponente eindeutig zurücksetzen ... nicht, dass mir das je passiert ist . :)