如何通过“;函数指针“/事件转换为Polymer/HTML中的子元素

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

本文关键字：Polymer HTML 元素 事件 何通过 函数 指针 转换      更新时间：2023-09-26

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

如何在聚合物中发送函数/事件？我走错了路？聚合物确实谈到了听众和解雇，但我不确定如何在这个例子中应用这一点，也许我只是错过了页面上的一个关键点？

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

要声明性地向Polymer元素添加事件侦听器，请插入以下形式的属性：

<自定义元素-EVENTNAME="METHODNAME">

其中：

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

然后，元素（或其子元素）可以用this.fire('EVENTNAME'):触发该事件

<dom模块id="custom-element">。。。<脚本>聚合物({为："自定义元素"，foo:函数（）{this.fire（"我定制的活动"）}，。。。})；<脚本><dom模块>

示例

以您的代码为例。。。

  1. 侦听my-add-model-dialog上的create事件，将createmodel()绑定为事件处理程序：

    <my-add-model-dialog on-create="createmodel"></my-add-model-dialog>

  2. 在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

相关文章：