当脚本选择单选按钮时，paper-radio-group-changed 不触发

Question

我有一个 paper-radio-group 监听事件 paper-radio-group-changed。当有人手动单击单选按钮时，此事件会完美触发，但在脚本分配时不会触发。这是我如何通过脚本分配它

<paper-radio-group id="prg">
    <paper-radio-button name="a">A</paper-radio-button>
    <paper-radio-button name="b">B</paper-radio-button>
    <paper-radio-button name="c">C</paper-radio-button>
</paper-radio-group>

...
<script>
    $("#prg").selected = "a";
    $(document).on('paper-radio-group-changed', '#prg', {}, function (e) {
      //Whatever here is not executed
    });
</script>

更多观察：

单选按钮"a"实际上被选中了。但是该事件永远不会被解雇。为什么？我是否选择了错误的事件监听器或需要额外的事件监听器？

Answer 1

你需要用 Polymer 思考。

html

<paper-radio-group selectedAttribute="name" selected="{{selected}}">

js

this.selected = "a";

/*
 * observer on the property, selected
 */

Answer 2

当通过 select(itemName):

方法发生 select 离子变化时，会触发

paper-radio-group-changed

// paper-radio-group-changed

let prg = document.querySelector('#prg');

prg.select('b');

prg.addEventListener('paper-radio-group-changed', e => {
    alert('paper-radio-group-changed');
});
// jQuery on() works as well

通过使用 Polymer.IronSelectableBehavior 的 selected-changed 事件可以监听 selected 属性的变化：

// selected-changed

prg.selected = 'b';

prg.addEventListener('selected-changed', e => {
    alert('selected-changed');
});

查找有关 paper-radio-group 及其活动的更多信息 here。

关于 jQuery + Polymer

的两个注释

阴影中的元素 DOM 与 jQuery 并不容易 select。

使用 jQuery 设置自定义属性并不总是符合 Polymer 的预期：

$('#prg').attr({foo: 'bar'}); // These syntaxes should work
$('#prg').attr('foo': 'bar');
// However for the attribute 'selected', being a valid HTML 
// attribute which accepts a true/false (set/undefined) value pair,
// the value is ingored by jQuery resulting in selected="selected"
$('#prg').attr('selected', 'b');

所以在这种情况下 select 使用 document.querySelector() 可能更安全。

请注意，如果您将 <paper-radio-group id="prg"> 放置在另一个聚合物元素（即 <my-app></my-app>）内，您可以使用 this.$:

访问它

class MyApp extends Polymer.Element {
  static get is() { return  'my-app' }
  ready() {
    super.ready();
    this.$.prg.selected = 'b';
  }
}

https://www.polymer-project.org/2.0/docs/devguide/dom-template#node-finding

当脚本选择单选按钮时，paper-radio-group-changed 不触发

paper-radio-group-changed not firing when a radio button is selected by script

javascript

web-component

polymer

关于 jQuery + Polymer