Question

我想要一组单选按钮，选择是否应显示法国地图或世界地图。我的问题是，聚合物官方文档只说明了改变＆＃34;作为单选按钮状态的事件。所以问题在于，使用下面的当前代码，单击不同的单选按钮将按预期工作，但单击已选中的单选按钮将触发此更改＆＃34;更改＆＃34;事件（在我看来这是一个错误的行为，因为按钮状态仍然是＆＃34;选择＆＃34;，没有任何改变。所以我的问题如下：是否有任何其他事件的单选按钮状态？我试过＆＃34;已检查＆＃34;，＆＃34;已选择＆＃34;，但这些似乎都不起作用......

这是我的代码：

<div id="mapSelector">
<paper-radio-group id="mapSelectors" selected="radioWorld">
    <paper-radio-button id="radioFrance" name="radioFrance">France map</paper-radio-button>
    <paper-radio-button id="radioWorld" name="radioWorld">World map</paper-radio-button>
</paper-radio-group>
</div>

<div id="containerFrance" hidden="{{hideFrance}}" style="width: 800px; height: 600px;">
</div>

<div id="containerWorld" hidden="{{hideWorld}}" style="width: 800px; height: 600px;">
</div>



</template>

<script>
Polymer({
    is: 'page-maps',
    listeners: {
        'radioFrance.change': 'toggleMaps',
        'radioWorld.change': 'toggleMaps'
    },
    hideFrance: {
        type: Boolean,
        value: false
    },
    hideWorld: {
        type: Boolean,
        value: true
    },
    toggleMaps: function () {
        this.hideFrance = this.hideWorld;
        this.hideWorld = !this.hideWorld;
    }
});
</script>
</dom-module>

Answer 1

Use the change event but then check the value of your toggle button in the callback, like so:

Polymer({
  is: 'page-maps',
  listeners: {
      'radioFrance.change': 'toggleMaps',
      'radioWorld.change': 'toggleMaps'
  },
  hideFrance: {
      type: Boolean,
      value: false
  },
  hideWorld: {
      type: Boolean,
      value: true
  },
  toggleMaps: function (e) {
      if(e.srcElement.value == false){
          //do some code
      }else{
          //do some other code
      }
  }
});

其他州除了＆＃34;改变＆＃34;用于聚合物中的单选按钮

1 个答案: