Question

从今天早上起我心里就有了一个问题，我无法找到解决方案。

我有两个用Polymer构建的模板。

问题是：什么是让他们进行沟通的更好的解决方案？回调或事件？为什么？

示例：

我有一个元素（my-param-vehcle）允许您选择一个收音机（车辆或车辆组），并打开一个对话框。当你点击＆＃34;发送＆＃34;对话框中的按钮，如果您选择＆＃34; vehicle＆＃34;，如果您的选择是＆＃34;车辆组＆＃34;它会发回一个事件。它将使用回调。

什么是更好的解决方案，为什么？

非常感谢！

第一个元素：

<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元素的方式。并且事件是用于冒泡消息的现有（即本机）机制。 Polymer的口头禅是“使用平台”，因此这些机制可以很好地实现这一目标。

另一方面，双重绑定既复杂又昂贵，无论是观察/反映/通知DOM的变化，还是逻辑上难以理解（什么特征正在改变什么变量以及何时变化）。

不久就会陷入困境，因为当你在读取器组件中读取消息时清楚地重置它时，为什么导航组件中的徽章会保持旧值...而不是那种情况发生在我身上。：）

Polymer：回调VS事件

1 个答案: