Vaadin 10 Beta3中paper-radio-group值双向绑定问题求助

我之前在Vaadin 10 Beta版本里也踩过类似的双向绑定坑，尤其是在dom-repeat里嵌套Polymer组件的场景，给你几个针对性的排查和解决思路：

1. 修正前端双向绑定的语法 #

Polymer组件的双向绑定需要明确指定触发反向更新的事件，paper-radio-group的选中状态变化会触发change事件，所以你需要把单向绑定的[[selected]]改成带事件修饰符的双向绑定语法：

<paper-radio-group selected="{{item.aOrBProperty::change}}">

这里的::change是关键——它告诉Polymer，当组件触发change事件时，把当前的selected值同步回绑定的模型对象，否则只会从Java端单向同步到前端，不会反向触发Java的setter方法。

2. 确保模型对象是可观察的 #

Vaadin的双向绑定依赖于属性变更通知机制，如果你的模型是普通POJO，Java端无法感知到前端的修改，自然不会调用对应的setter。解决方法有两种：

• 让模型类继承com.vaadin.flow.component.HasPropertyChangeListeners，并在setter里手动触发属性变更事件：

  public class MyModelItem implements HasPropertyChangeListeners {
      private String aOrBProperty;
  
      public String getAOrBProperty() {
          return aOrBProperty;
      }
  
      public void setAOrBProperty(String aOrBProperty) {
          String oldValue = this.aOrBProperty;
          this.aOrBProperty = aOrBProperty;
          firePropertyChange("aOrBProperty", oldValue, aOrBProperty);
      }
  }
  

• 或者使用Vaadin的@Property注解（适用于Vaadin Flow的模板模型类），它会自动帮你处理属性变更通知：

  public static class MyModelItem extends Serializable {
      private String aOrBProperty;
  
      @Property
      public String getAOrBProperty() {
          return aOrBProperty;
      }
  
      public void setAOrBProperty(String aOrBProperty) {
          this.aOrBProperty = aOrBProperty;
      }
  }
  

3. 配置Polymer组件的属性通知 #

在你的HTML模板的dom-module中，要确保绑定的数组属性开启了notify选项，这样数组内部元素的变化才能传递回Java端：

<dom-module id="my-template-component">
  <template>
    <dom-repeat items="{{items}}">
      <template>
        <paper-radio-group selected="{{item.aOrBProperty::change}}">
          <paper-radio-button name="A">选项A</paper-radio-button>
          <paper-radio-button name="B">选项B</paper-radio-button>
        </paper-radio-group>
      </template>
    </dom-repeat>
  </template>
  <script>
    class MyTemplateComponent extends Polymer.Element {
      static get is() { return 'my-template-component'; }
      static get properties() {
        return {
          items: {
            type: Array,
            notify: true // 必须开启，否则数组元素变更无法同步回Java
          }
        };
      }
    }
    customElements.define(MyTemplateComponent.is, MyTemplateComponent);
  </script>
</dom-module>

4. 排查Beta版本的已知问题 #

Vaadin 10 Beta3属于早期测试版本，可能存在一些嵌套组件双向绑定的bug。你可以尝试：

• 升级到Vaadin 10后续的Beta版本（比如Beta4及以上），这类绑定问题通常会在迭代中被修复；
• 检查Vaadin官方的GitHub Issues，看看是否有其他开发者遇到过完全相同的场景，是否有临时的workaround方案。

内容的提问来源于stack exchange，提问作者Bernd Hopp