2017-01-31 6 views
1

今朝から私の心に質問があり、解決策を見つけることができません。ポリマー:コールバックVSイベント

私はPolymerで作成された2つのテンプレートを持っています。

問題は次のとおりです。両方を通信させるためのよりよい解決策は何ですか?コールバック、またはイベント?なぜ?

例:

は、私はあなたがラジオ(車両、または車両グループ)を選択することを可能にする要素を(私の-PARAM-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> 

答えて

0

もちろんそこには厳格なルールではありませんが、私は、ポリマーのためのベストプラクティスは、「降水パターン」を使用することであると考えていることにより、ツリーを下って行くデータ(ルートからリーフまで)はプロパティを介して送信され、ツリーを上に行くデータはイベントを介して送信されます。

あなたの質問にお答えするには、所定の措置でイベントを使用してください。

なぜ、私はそれに答えることができる自分よりもはるかに賢い人がいますが、回答していないので、私はそれを行っていきます。

片方向バインディングはかなり簡単で、ブラウザがDOM要素を処理する方法に適しています。イベントは、メッセージをバブルアップするための既存の(すなわちネイティブの)メカニズムである。ポリマーのマントラは「プラットフォームを使用する」ので、これらのメカニズムはその目的のためにうまく機能します。

一方、二重バインドは、DOMの変更をDOMで観察/反映/通知するだけでなく、論理的に理解しにくい(どの機能がどの変数をいつ変更するのか)の両方で複雑で高価です。

あなたのnavコンポーネントのバッジが、読者のコンポーネントでメッセージを読んでいるときに明確にリセットしたときに、なぜ古い値を取得し続けるのか、追いかけるのは時間がかかりません。 。 :)

関連する問題