如何将 "function pointer"/ 事件传递给 Polymer/HTML 中的子元素

Question

我创建了一个使用纸质对话框的通用 "create X dialog" 组件，我想向通用组件发送我希望在触发 "create button" 时调用的特定操作。

如何在 Polymer 中发送函数/事件？我以错误的方式接近这个？聚合物 dos talk about listeners and firing 但我不确定如何在这个例子中应用它，也许我只是错过了该页面上的一个关键点？

<dom-module id="my-add-dialog">

  <template>

    <style>
    </style>

    <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
      <h2>{{title}}</h2>
      <p>{{description}}</p>

      <paper-button raisedButton id="test" label="Click" on-click="createGeneric">
      </paper-button>

    </paper-dialog>


  </template>

  </script>

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


      properties: {
        createVirtual: {
          type: Function
        },

      },

      createGeneric: function() {
        alert("I'm alive");
        createVirtual();
      },

      open: function() {
        this.$.dialog.open();
      }


    });
  </script>

</dom-module>

组成的组件：

<dom-module id="my-add-model-dialog">

  <template>
    <my-add-dialog id="dialog" title = "Acount Creation" description="Create Account" createVirtual="createmodel"></my-add-dialog>
  </template>

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

      open: function(){
        this.$.dialog.open();
      },

      createmodel: function(){
        alert("Creating a model");
      },


    });
  </script>


</dom-module>

Answer 1

到declaratively add an event listener到一个Polymer元素，插入一个形式为的属性：

    <custom-element on-EVENTNAME="METHODNAME">

其中：

EVENTNAME 是要收听的事件的小写名称（例如，tap、click , blur, my-custom-event).
METHODNAME 是事件处理程序方法的区分大小写名称。

然后，该元素（或其子元素）可以通过 this.fire('EVENTNAME'):

触发该事件

    <dom-module id="custom-element">
        ...
        <script>
            Polymer({
                is: 'custom-element',
                foo: function() {
                    this.fire('my-custom-event');
                },
                ...
            });
        </script>
    </dom-module>

例子

以您的代码为例...

监听 my-add-model-dialog 上的 create 事件，将 createmodel() 绑定为事件处理程序：
```
<my-add-model-dialog on-create="createmodel"></my-add-model-dialog>
```

在 my-add-dialog 中，触发 create 事件，该事件冒泡到 my-add-model-dialog，调用 createmodel().

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

    createGeneric: function() {
      alert("I'm alive");
      this.fire('create');
    },
    ...
  });
</script>

<head>
  <base href="https://polygit.org/polymer+:master/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>
  <my-add-model-dialog></my-add-model-dialog>

  <dom-module id="my-add-dialog">
    <template>
      <paper-dialog id="dialog" with-backdrop>
        <h2>{{title}}</h2>
        <p>{{description}}</p>
        <paper-button raised on-click="createGeneric">Create</paper-button>
      </paper-dialog>
    </template>

    <script>
      Polymer({
        is: 'my-add-dialog',
  
        createGeneric: function() {
          alert("I'm alive");
          this.fire('create');
        },
  
        open: function() {
          this.$.dialog.open();
        },
  
        ready: function() {
          this.open();
        }
      });
    </script>
  </dom-module>

  <dom-module id="my-add-model-dialog">
    <template>
      <my-add-dialog id="dialog" title="Account Creation" description="Create Account" on-create="createmodel"></my-add-dialog>
    </template>

    <script>
      Polymer({
        is: 'my-add-model-dialog',
  
        open: function() {
          this.$.dialog.open();
        },
  
        createmodel: function() {
          alert("Creating a model");
        }
      });
    </script>
  </dom-module>
</body>

^jsbin

如何将 "function pointer"/ 事件传递给 Polymer/HTML 中的子元素

How to pass a "function pointer"/ event to a child element in Polymer/HTML

javascript

html

polymer

paper-elements

例子