Polymer: callback VS event

Question

У меня вопрос с моей точки зрения с утра, и я не могу найти решение.

У меня есть два шаблона, построенных с использованием полимера.

Вопрос в том, что является лучшим решением, чтобы заставить их обоих общаться? Обратный звонок или событие? И почему?

Пример:

У меня есть элемент (мой-пары-vehcle), которые позволяют вам выбрать радио (автомобиль или группу транспортных средств), и откроется диалоговое окно. Когда вы нажимаете кнопку «отправить» в диалоговом окне, если ваш выбор был «транспортным средством», он отправит ответное событие, если ваш выбор был «группой транспортных средств», он будет использовать обратный вызов.

Какое лучшее решение и почему?

Большое спасибо!

первый элемент:

<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> 

диалог:

<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

Очевидно, что нет жестких правил, но я считаю, что лучшая практика для полимеров является использование «модель осаждения» в результате чего данные, идущие вниз по дереву (от корня до листа), отправляются через свойства, а данные, идущие вверх по дереву, отправляются через события.

Чтобы ответить на ваш вопрос, предписанное действие будет использовать событие.

Что касается того, почему есть гораздо более умные люди, чем я, которые могли бы ответить на это, но поскольку они не отвечают, я отдам его.

Односторонняя привязка довольно проста и хорошо подходит для того, как браузер обрабатывает элементы dom. А события - это существующий (т. Е. Собственный) механизм для создания пузырей сообщений. Мантра Полимера - «Использовать платформу», поэтому эти механизмы хорошо работают с этой целью.

С другой стороны, двойное связывание является сложным и дорогостоящим как с точки зрения наблюдения/отражения/уведомления DOM об изменениях, так и с точки зрения логики, которые трудно понять (какая функция меняет какую переменную и когда).

Прошло совсем немного времени, чтобы погрязнуть в том, почему значок в вашем навигационном компоненте продолжает получать старое значение, когда вы четко сбросили его при чтении сообщения в компоненте читателя ... не то, что со мной когда-либо случалось , :)