纸质单选按钮未正确更新

Question

我想创建一个公式，根据选择的用户类型，显示不同的字段。为此，我在该组的 selected 属性上设置了一个无线电组和一些数据绑定。

<paper-radio-group id="newUserTypeRadio" selected="{{newUserType}}">
    <paper-radio-button name="admin">admin</paper-radio-button>    
    <paper-radio-button name="user">user</paper-radio-button>
    <paper-radio-button name="guest">guest</paper-radio-button>
</paper-radio-group>

我的听众：

listeners: { 
            "newUserTypeRadio.change": "userTypeForm"
        }

和函数，（目前）只是一个 console.log

        userTypeForm: function () {
            console.log("user type : ", this.newUserType);
        }

是的，就是这样。问题是，当我第一次点击 "Admin" 单选按钮时，日志显示 undefined，然后我点击 "guest"，日志显示 "admin"，等等......所以 selected 值始终是以前的值，而不是当前值。

有什么办法可以解决这个问题吗？

Answer 1

这是使用 observer 而不是 listener

实现的解决方案

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-radio-group/paper-radio-group.html">
<link rel="import" href="paper-radio-button/paper-radio-button.html">
<dom-module id="radio-group">
  <template>
    <style></style>
    <paper-radio-group id="newUserTypeRadio" selected="{{newUserType}}">
      <paper-radio-button name="admin">admin</paper-radio-button>
      <paper-radio-button name="user">user</paper-radio-button>
      <paper-radio-button name="guest">guest</paper-radio-button>
    </paper-radio-group>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'radio-group',
    properties: {
      newUserType: {
        type: String,
        observer: 'userTypeForm'
      }
    },
    userTypeForm: function(newVal, oldVal) {
      console.log("oldvalue:" + oldVal, ", current value:" + newVal, ", newUserType value:" + this.newUserType);
    }
  })
</script>


<radio-group></radio-group>

纸质单选按钮未正确更新

paper-radio button does not update properly

data-binding

radio-group

polymer