Vaadin cache.js

Question

我正在尝试使用复选框来构建treeSelectView。 它实现了HasValue，因此setValue交出了应该选中复选框的节点列表。并且每当调用该函数时，将选中这些复选框。接下来是缺点。当treeSelectView到达客户端时，将调用名称为https://localhost:8443/VAADIN/static/client/client-BF4676DDAFDA5E40AE93EFEB692AAAD5.cache.js的脚本，该脚本会将树中的所有复选框都设置为未选中。这是日志输出：

Sending xhr message to server: {"csrfToken":"8eb266a3-ec2b-4238-9d2e-00da55a02c27","rpc":[{"type":"mSync","node":313,"feature":1,"property":"selected","value":false},{"type":"mSync","node":307,"feature":1,"property":"selected","value":false},{"type":"mSync","node":301,"feature":1,"property":"selected","value":false},{"type":"mSync","node":295,"feature":1,"property":"selected","value":false},{"type":"mSync","node":289,"feature":1,"property":"selected","value":false},{"type":"mSync","node":283,"feature":1,"property":"selected","value":false},{"type":"mSync","node":277,"feature":1,"property":"selected","value":false},{"type":"mSync","node":271,"feature":1,"property":"selected","value":false},{"type":"mSync","node":265,"feature":1,"property":"selected","value":false},{"type":"mSync","node":259,"feature":1,"property":"selected","value":false},{"type":"mSync","node":253,"feature":1,"property":"selected","value":false},{"type":"mSync","node":247,"feature":1,"property":"selected","value":false},{"type":"mSync","node":241,"feature":1,"property":"selected","value":false},{"type":"mSync","node":235,"feature":1,"property":"selected","value":false},{"type":"mSync","node":229,"feature":1,"property":"selected","value":false},{"type":"mSync","node":223,"feature":1,"property":"selected","value":false},{"type":"mSync","node":217,"feature":1,"property":"selected","value":false},{"type":"mSync","node":211,"feature":1,"property":"selected","value":false},{"type":"mSync","node":205,"feature":1,"property":"selected","value":false},{"type":"mSync","node":199,"feature":1,"property":"selected","value":false},{"type":"mSync","node":193,"feature":1,"property":"selected","value":false},{"type":"mSync","node":187,"feature":1,"property":"selected","value":false},{"type":"mSync","node":181,"feature":1,"property":"selected","value":false},{"type":"mSync","node":175,"feature":1,"property":"selected","value":false},{"type":"mSync","node":169,"feature":1,"property":"selected","value":false},{"type":"mSync","node":163,"feature":1,"property":"selected","value":false},{"type":"mSync","node":157,"feature":1,"property":"selected","value":false},{"type":"mSync","node":151,"feature":1,"property":"selected","value":false},{"type":"mSync","node":145,"feature":1,"property":"selected","value":false},{"type":"mSync","node":139,"feature":1,"property":"selected","value":false},{"type":"mSync","node":133,"feature":1,"property":"selected","value":false},{"type":"mSync","node":127,"feature":1,"property":"selected","value":false},{"type":"mSync","node":121,"feature":1,"property":"selected","value":false},{"type":"mSync","node":115,"feature":1,"property":"selected","value":false},{"type":"mSync","node":109,"feature":1,"property":"selected","value":false},{"type":"mSync","node":103,"feature":1,"property":"selected","value":false},{"type":"mSync","node":97,"feature":1,"property":"selected","value":false},{"type":"mSync","node":91,"feature":1,"property":"selected","value":false},{"type":"mSync","node":85,"feature":1,"property":"selected","value":false},{"type":"mSync","node":79,"feature":1,"property":"selected","value":false},{"type":"mSync","node":73,"feature":1,"property":"selected","value":false},{"type":"mSync","node":67,"feature":1,"property":"selected","value":false},{"type":"mSync","node":61,"feature":1,"property":"selected","value":false},{"type":"mSync","node":55,"feature":1,"property":"selected","value":false},{"type":"mSync","node":49,"feature":1,"property":"selected","value":false},{"type":"mSync","node":43,"feature":1,"property":"selected","value":false},{"type":"mSync","node":37,"feature":1,"property":"selected","value":false},{"type":"mSync","node":31,"feature":1,"property":"selected","value":false},{"type":"mSync","node":25,"feature":1,"property":"selected","value":false},{"type":"mSync","node":19,"feature":1,"property":"selected","value":false}],"syncId":1,"clientId":1}

这完全是意外的行为。 谁能告诉我为什么会这样吗？

更新

这是我的TreeSelectItem：

    <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/vaadin-checkbox/src/vaadin-checkbox.html">
<link rel="import" href="../../../bower_components/vaadin-button/src/vaadin-button.html">
<dom-module id="tree-select-item">
<template>
    <style>
        #currentItemContainer{
            background-color: var(--lumo-contrast-10pct);
            border-radius: var(--lumo-border-radius);
            padding: 5px;
            margin: 3px;
            overflow: auto;
        }
        .hidden{
            display: none;
        }

    </style>
    <div id="currentItemContainer" style$="{{_getStyle(level)}}" class$="{{_isHidden(hidden)}}">
        <div style="width: 90px; float: left">
            <vaadin-checkbox id="checkbox" checked="{{selected}}" indeterminate="{{indeterminate}}" disabled="{{readOnly}}"></vaadin-checkbox>
            <vaadin-button class$="{{_isToggleHidden(hasDescendents)}}" theme="icon" on-click="collapse" style="--lumo-button-size: var(--lumo-size-xs);">
                <iron-icon icon="{{_getCollapseToggle(collapsed)}}" slot="prefix"></iron-icon>
            </vaadin-button>
        </div>
        <div id="layout" float: left></div>
    </div>
</template>
  <script>
    {
      class TreeSelectItem extends Polymer.Element {
        static get is() {
          return 'tree-select-item';
        }
     /*    collapse(){
            this.collapsed = !this.collapsed;
            var parentElement = this.parentNode.__dataHost;
            parentElement.collapse(this.id,this.collapsed);
        } */
        _getCollapseToggle(collapsed){
            return collapsed ? "lumo:angle-right" : "lumo:angle-down";
        }
        _isToggleHidden(hidden){
            return !hidden ? "hidden" : "";
        }
        _isHidden(hidden){
            return hidden ? "hidden" : "";
        }
        _getStyle(marginFactor){
            return "margin-left:"+(20*marginFactor)+"px;";
        }
      }
      window.customElements.define(TreeSelectItem.is, TreeSelectItem);
    }
  </script>
</dom-module>

这是Java部分

    @Data
@Tag("tree-select-item")
@HtmlImport("base/template/component/tree-select-item.html")
public class TreeSelectItem<T extends BasicTreeObject<T>> extends PolymerTemplate<TreeSelectItemTemplateModel> {
    /**
     * The element containing this item
     */
    private TreeSelect<T> treeSelect;
    private T item;
    @Id("layout")
    private Div layout;
    @Id("checkbox")
    private Checkbox checkbox;

    public TreeSelectItem(T item, TreeSelect<T> treeSelect) {
        setCollapsed(false);
        setSelected(false);
        getModel().setLevel(item.getLevel());
        getModel().setId(item.getId().intValue());
        getModel().setHasDescendents(CollectionUtils.isNotEmpty(item.getChildren()));
        getModel().setHidden(false);
        getModel().setReadOnly(false);
        this.treeSelect = treeSelect;
        this.item = item;
        render();
    }

    public void render() {
        layout.removeAll();
        Component label = treeSelect.getItemRenderer().createComponent(item);
        layout.add(label);
    }

    @EventHandler
    public void collapse() {
        treeSelect.collapse(this);
    }

    public void setCollapsed(boolean collapsed) {
        getModel().setCollapsed(collapsed);
    }

    public boolean isCollapsed() {
        return getModel().isCollapsed();
    }

    public void setSelected(boolean selected) {
        setIndeterminate(false);
        getModel().setSelected(selected);
    }

    public boolean isSelected() {
        return getModel().isSelected();
    }

    public void addSelectionListener(PropertyChangeListener listener) {
        getElement().addPropertyChangeListener("selected", listener);
    }

    public void setHidden(boolean hidden) {
        getModel().setHidden(hidden);
    }

    public void setIndeterminate(boolean indeterminate) {
        getModel().setIndeterminate(indeterminate);
    }

    public void setReadOnly(boolean readOnly) {
        getModel().setReadOnly(readOnly);
    }

    public String toString() {
        return this.item.toString();
    }
}

这是设置值的函数：

@Override
    public void setValue(List<T> value) {
        for (TreeSelectItem<T> tsi : this.treeSelectItems) {
            tsi.setSelected(value.contains(tsi.getItem()));
        }
        updateParentNodesCheckbox();
    }