Question

我制作了这个自定义元素（请求表单），其中包含一系列元素（自定义输入）。 request-form有一个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>

这是我的自定义输入元素中输入字段（id =＆＃34; custominput＆＃34;）上的值更改时的代码。

inputCommited: function () {
            this.$.decorator.isInvalid = !this.$.custominput.validity.valid;
            if (this.$.custominput.validity.valid) {
                var inputval = this.$.custominput.value;
                this.fire('inputcommited', { inputval: inputval, columnid: this.columnId });
            }
        }

更改输入的值会触发此函数，检查其valitidy和all，但永远不会触发父元素getinput函数。

我想要的最终是拥有一个字符串数组，例如{＆＃34; columnid1 | value1＆＃34;，＆＃34; columnid2 | value2＆＃34;，[...]}

修改

在插入几个警报后，我可以肯定地说明子元素中的inputCommited工作正常，并且它运行所有代码，在＆＃39; this.fire（...）＆＃39之前和之后;言。

从来没有getinput中的代码

修改

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

首先，这个明信片元素中有两个图标：

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

正如您所看到的，只要点击两个图标中的一个，代码就会告诉它触发事件，禁止点击或收藏 - 点击

现在，这是父元素，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>

禁止点击和收藏 - 点击触发父事件，就像我想要的那样，设置on-whatever="{{dosomething}}"

Answer 1

编辑：

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

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>

Polymer元素：从子元素到父元素的Fire事件，然后将值推送到数组属性

1 个答案: