Polymer 1.0 Paper-Radio-Group 包裹在模板中时发送旧值

Question

触发 on-tap 函数时，它会捕获并记录之前的值。

如果 {{item.authd}} 设置为 authnr 它的单选按钮突出显示但是当点击另一个按钮时 e.currentTarget.selected 显示旧值，而不是点击的？

<template is="dom-repeat" items="{{data}}">
  <paper-radio-group selected="{{item.authd}}" on-tap="authChanged" id="{{item.id}}">
  <paper-radio-button name="authnr">N/R</paper-radio-button>
  <paper-radio-button name="pending">Pending</paper-radio-button>
  <paper-radio-button name="authd">Auth</paper-radio-button>
</paper-radio-group>
</template>

authChanged: function(e, name) {
  console.log(e.currentTarget.selected) // shows old value, not tapped value
}

Answer 1

看看下面的片段：

<dom-module id="x-test">

  <template>
    <template is="dom-repeat" items="[[data]]">
      <paper-radio-group attr-for-selected="name" selected="{{item.authd}}" on-tap="authChanged" id="{{item.id}}">
      <paper-radio-button name="authnr">N/R</paper-radio-button>
      <paper-radio-button name="pending">Pending</paper-radio-button>
      <paper-radio-button name="authd">Auth</paper-radio-button>
    </paper-radio-group>
    </template>
  </template>

  <script>      
    Polymer({
      is: 'x-test',
      properties: {
        data: {
          type: Array,
          value: function() {
            return [
              {authd: 'authnr',id: 1},
              {authd: 'pending', id:2},
              {authd: 'authd', id:3}
            ]
          }
        },
      },

      authChanged: function(e, name) {
        this.async(function() {
          var model = e.model.item;
          console.log(model.authd, model.id);
        });
      }
    });
  </script> 
</dom-module>

我已将 attr-for-selected 添加到单选组以识别选择了哪个单选按钮。

在 authChanged 回调中，我使用了 async 方法来确保 selected 值在我们检查模型中的当前项之前已更改。

Polymer 1.0 Paper-Radio-Group 包裹在模板中时发送旧值

Polymer 1.0 Paper-Radio-Group sending old value when wrapped in Template

javascript

polymer

polymer-1.0