聚合物数据绑定到方法答案

【问题标题】：Polymer Data Bind to a method聚合物数据绑定到方法
【发布时间】：2016-10-31 08:30:38
【问题描述】：

我正在使用包含<paper-dialog> 的自定义元素，以便我可以在我的应用程序中重用对话框样式。

结构如下：

Polymer({
    is: 'dialog-confirm',

    properties: {
        title: {
            type: String,
            value: 'Dialog Title',
            reflectsToAttribute: true
        },
        message: {
            type: String,
            value: 'Dialog message',
            reflectsToAttribute: true
        }
    },

    /**
     * Triggered when the document is loaded
     */
    ready: function () {
        var me = this;
    },

    /**
     * Open the dialog
     */
    open: function () {
        this.$.dialog.open();
    }
});

然后，我如下声明我的组件，以便准备好一个“准备好的”对话框：

（为简洁起见，我删除了<link import="...">）

<dom-module id="dialog-confirm">
    <template>
        <style>
        </style>

        <paper-dialog id="confirmation"
                      modal with-backdrop
                      entry-animation="slide-from-top-animation"
                      exit-animation="fade-out-animation"
                      on-iron-overlay-closed="_onSignoutConfirm">
            <h2>{{title}}</h2>
            <paper-dialog-scrollable>
                <p>{{message}}</p>
            </paper-dialog-scrollable>
            <div class="buttons">
                <paper-button class="normal" dialog-dismiss>NO</paper-button>
                <paper-button class="positive" dialog-confirm>YES</paper-button>
            </div>
        </paper-dialog>

    </template>
    <script type="text/javascript" src="dialog-confirm.js"></script>
</dom-module>

问题是这是一个组件，我想将 iron-overlay-closed 事件暴露在组件之外。否则，当我重新使用我的组件时，我无法将它数据绑定到新方法，如下所示：

<dialog-confirm id="myDialog" on-iron-overlay-closed="_myCustomMethod"></dialog-confirm>

这可能吗？

【问题讨论】：

标签： javascript data-binding polymer polymer-1.0 paper-dialog

【解决方案1】：

iron-overlay-closed 事件已经从子组件中冒出，如以下演示所示。如果它没有为您冒泡，则问题可能是由您的问题中未显示的其他原因引起的。

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <x-dialog on-iron-overlay-closed="_myCustomMethod"></x-dialog>
    </template>
    <script>
      HTMLImports.whenReady(() => {
        Polymer({
          is: 'x-foo',
          _myCustomMethod: function() {
            console.log('_myCustomMethod: overlay closed');
          }
        });
      });
    </script>
  </dom-module>
  
  <dom-module id="x-dialog">
    <template>
      <paper-dialog opened on-iron-overlay-closed="_onIronOverlayClosed">
        <div class="buttons">
          <paper-button dialog-dismiss>Ok</paper-button>
        </div>
      </paper-dialog>
    </template>
    <script>
      HTMLImports.whenReady(() => {
        Polymer({
          is: 'x-dialog',
          _onIronOverlayClosed: function() {
            console.log('_onIronOverlayClosed: overlay closed');
          }
        });
      });
    </script>
  </dom-module>
</body>

codepen

【讨论】：