Vaadin 23：JavaScript 更改的 addPropertyChangeListener

Question

预期：在 Vaadin 23 应用程序中，我希望在 HTML 属性的值更改时得到通知。

我尝试了什么：我创建了这个输入公式：

    // Text input field
    Input input = new Input();
    input.setId("myInputField");
    Element textInput = input.getElement();
    
    // Change listener for property "value"
    // Works well for manual input
    // BUT doesn't work for JavaScript changes
    textInput.addPropertyChangeListener("value", "change", 
        e -> {System.out.println(e.getValue());}
    );
    
    // Button that changes the value of attribute "value"
    Button button = new Button("Change value");
    button.addClickListener(e -> {UI.getCurrent().getPage().executeJs(
        "document.getElementById('myInputField').setAttribute('value','hello');"
    );});

    this.add(input, button);

什么起作用：当用户在输入字段中键入“something”时，服务器将“something”打印到控制台。这是有意和观察到的。好的。

什么不起作用：当用户按下按钮时，输入字段的内容是“你好”（确定）。但是 PropertyChangeListener 不会触发事件，因此服务器不会向控制台打印任何内容。

问题：有没有办法让 PropertyChangeListener 触发事件，即使属性的值已被 JavaScript 更改？

Answer 1

我看到这里有两个问题。

首先，Vaadin Flow 中的 server-side 属性更改侦听器需要由 client-side 事件触发。 <input> 元素在用户直接更改字段中的值时触发事件，但在以编程方式更改值时则不会。如果您从代码更改值，那么您还需要手动触发一个事件来触发更新。

其次，正如评论中所指出的，您应该更改属性而不是属性。在大多数情况下，属性和同名的属性保持同步，但输入的值是一个例外。这里，属性是初始值，属性是实际值。如果您只更改属性，则保持不变，但在用户通过 UI 进行编辑或更改属性后会有所不同。

Vaadin 23：JavaScript 更改的 addPropertyChangeListener

Vaadin 23: addPropertyChangeListener for JavaScript changes

vaadin

vaadin23