Polymer 聚合元素：将事件从子元素激发到父元素，然后将值推入数组属性

我制作了这个自定义元素（请求表单），它包含一系列元素（自定义输入）。请求表单有一个formvalues属性，它是一个数组

我的目标是每次更改自定义输入值时，都应将其新值推送到请求表单数组中

<polymer-element name="request-form" attributes="isSearch formvalues">
<template>
    <style>
    </style>
    <div layout vertical>
        <custom-core-input 
            columnId="12345678-1234-1234-123456789123"
            validation="^[0-9]*$" 
            inputRequired
            on-inputcommited="{{getinput}}">
        </custom-core-input>
        [... some more custom-core-inputs ...]
    </div>        
</template>
<script>
    Polymer({
        created: function () {
            this.formvalues = [];
        },
        getinput: function (e, detail, sender) {
            this.formvalues.push(detail.columnid + "|" + detail.inputval);
        }
    });
</script>

更改输入值确实会触发此函数，检查其有效性和全部，但不会触发父元素getinput函数

最后，我想要的是一个字符串数组，比如{“columnid1 | value1”、“columnid2 | value2”、[…]}

编辑

在插入几个警报之后，我可以肯定地说，子元素中的inputCommitted工作得很好，并且它在'this.fire（…）'语句前后运行所有代码

但是，永远不要使用getinput中的代码

编辑

好的，这是我尝试做的一个工作示例，取自他们网页上的聚合物示例/教程

首先，有一个post card元素，其中有两个图标：

<polymer-element name="post-card">
   <template>
      <style>
      [...]
      </style>
      [...]
      <core-icon-button
          id="favicon"
          icon="favorite"
          on-tap="{{favoriteTapped}}">
      </core-icon-button>

      <core-icon-button
          id="banicon"
          icon="remove-circle"
          on-tap="{{bannedTapped}}">
      </core-icon-button>
  </template>
  <script>
  Polymer({
      publish: {
          favorite: {
              value: false,
              reflect: true
          },
          banned: {
              value: false,
              reflect: true
          }
      },
      favoriteTapped: function (event, detail, sender) {
          this.favorite = !this.favorite;
          this.banned = false;
          this.fire('favorite-tap');
      },
      bannedTapped: function (event, detail, sender) {
          this.banned = !this.banned;
          this.favorite = false;
          this.fire('banned-tap');
      }
  });
 </script>
 </polymer-element>

[...]
[...]
聚合物({
出版：{
最喜爱的：{
值：false，
反映：正确
},
禁止：{
值：false，
反映：正确
}
},
FavoriteTaped:函数（事件、详细信息、发送方）{
this.favorite=！this.favorite；
this.banked=false；
这个。火（“最爱的水龙头”）；
},
bannedTapped：功能（事件、详细信息、发件人）{
this.banked=！this.banked；
this.favorite=false；
这是一场火灾（“禁止水龙头”）；
}
});

正如您所看到的，每当点击两个图标中的一个时，代码都会告诉它触发和事件、禁止点击或喜爱点击

现在，这是父元素post list：

<polymer-element name="post-list" attributes="show">
 <template>
 <style>
 [...]
 </style>

<post-service id="service" posts="{{posts}}"></post-service>

<div layout vertical center>
  <template repeat="{{post in posts}}">
    <post-card
      favorite="{{post.favorite}}"          
      on-favorite-tap="{{handleFavorite}}" 
      banned="{{post.banned}}"
      on-banned-tap="{{handleBanned}}">
      [...]
    </post-card>
  </template>
</div>
</template>

<script>
  Polymer({
      handleFavorite: function (event, detail, sender) {
          var post = sender.templateInstance.model.post;
          this.$.service.setFavorite(post.uid, post.favorite);
      },
      handleBanned: function (event, detail, sender) {
          var post = sender.templateInstance.model.post;
          this.$.service.setBanned(post.uid, post.banned);
      }
  });
</script>
</polymer-element>

[...]
[...]
聚合物({
handleFavorite:函数（事件、细节、发送者）{
var post=sender.templateInstance.model.post；
此.$.service.setFavorite（post.uid，post.favorite）；
},
把手：功能（事件、细节、发送者）{
var post=sender.templateInstance.model.post；
此.$.service.setBanned（post.uid，post.banked）；
}
});

禁用的点击和收藏的点击都会触发父事件，正如我所希望的那样，在anywhere=“{{dosomething}}”上设置一个

编辑：

从子元素捕获自定义事件的另一种方法是在父元素的原型中执行此操作：

ready:function（）{
//选择自定义核心输入（但首先将此id属性添加到其中）
var custom_core_input=此。$.id_custom_core_input；
//等待事件触发
此.addEventListener（'InputCommitted'，函数（e）{
//下面是输入的函数代码：
});

我找不到“InputCommitted”事件的文档？！您是否尝试过使用“change”事件，如：on change=“{{{getinput}}”？嗯，据我所知，我的输入有一个事件on change，它会触发InputCommitted事件（第二个代码snipet）。因此，我告诉输入，一旦InputCommitted被激发，如果其有效，那么它必须对其父项激发“InputCommitted”。父项是请求表单（第一个代码snipet），正如您所看到的，它将“on InputCommitted”添加到输入中，告诉它激发自己的函数（aka，getinput）。可能我误解了整个过程，但我认为这就是它的工作原理。\为了简化它：我没有在这里输入自定义核心输入代码，但其中有一个更改事件。更改时激发InputCommitted（这是工作的），检查输入值是否有效（这也是工作的），然后告诉是否激发InputCommitted（都在较低的RCAP中），应在申请表（家长）中确认并启动getinput。在子级和父级之间的通信中，有些东西不起作用，但on change事件正在正确启动。问题是，每个自定义核心输入都是动态添加的，id对我来说没有意义为每个输入都添加id。另外，我知道polymer可以像我尝试的那样做。我正在更新我的问题使用工作模式（更简单）我尝试实现的示例。如果我没有实现，我想我可以使用您的解决方案，但我更喜欢另一种方式。现在我明白了您的观点，我将把我的答案编辑为“捕获自定义事件的另一种方式”。您的方式很好，但我认为我尝试的方式对于重复模板更好，因为您可以同时处理所有事件。仍然但是，不能让它以这种方式工作。如果你看到工作代码和我的代码之间有什么不同，请告诉我。

<polymer-element name="post-list" attributes="show">
 <template>
 <style>
 [...]
 </style>

<post-service id="service" posts="{{posts}}"></post-service>

<div layout vertical center>
  <template repeat="{{post in posts}}">
    <post-card
      favorite="{{post.favorite}}"          
      on-favorite-tap="{{handleFavorite}}" 
      banned="{{post.banned}}"
      on-banned-tap="{{handleBanned}}">
      [...]
    </post-card>
  </template>
</div>
</template>

<script>
  Polymer({
      handleFavorite: function (event, detail, sender) {
          var post = sender.templateInstance.model.post;
          this.$.service.setFavorite(post.uid, post.favorite);
      },
      handleBanned: function (event, detail, sender) {
          var post = sender.templateInstance.model.post;
          this.$.service.setBanned(post.uid, post.banned);
      }
  });
</script>
</polymer-element>

ready: function() {

        //select the custom-core-input(but first add this id attribute to it)
        var custom_core_input = this.$.id_custom_core_input;

         //wait for the event to fire
        this.addEventListener('inputCommited', function(e) {

        //Here comes inputCommited function code:

  });



<custom-core-input 
            columnId="12345678-1234-1234-123456789123"
            validation="^[0-9]*$" 
            inputRequired
            id="id_custom_core_input">
</custom-core-input>