除“;改变“;用于聚合物单选按钮

Other states than "change" for radio buttons in polymer

本文关键字：单选按钮 聚合物 改变 用于      更新时间：2024-02-07

我想要一组单选按钮，可以选择显示法国地图还是世界地图。我的问题是，聚合物官方文件只将"更改"作为单选按钮状态的事件。所以问题是，用我下面的当前代码，点击不同的单选按钮将按预期工作，但是点击一个已经被选中的单选按钮会触发这个"更改"事件（在我看来这是一个错误的行为，因为按钮状态仍然是"选中"的，没有任何更改。所以我的问题是：单选按钮状态还有其他事件吗？我试过"选中"、"选中"，但这些似乎都不起作用…

这是我的代码：

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

使用更改事件，然后在回调中检查切换按钮的值，如下所示：

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
      }
  }
});
相关文章：