如何同步不同视图中的控件值

Question

我想知道如何获取TextArea的内容，将值赋值给变量，将其设置为模型，然后将变量设置为另一个视图中的另一个TextArea。我编写了一些示例，它可以工作，但不能在 TextArea 上。

示例代码如下：

// In init of the Component.js
this.setModel(new JSONModel(), "TransportModel"); // JSONModel required from "sap/ui/model/json/JSONModel"

// In *.controller.js
this.getView().getModel("TransportModel").setProperty("/", {
  "Serial": this.byId("mat_serial").getValue() // "mat_serial" == id of the Input box in XML view
});

在最后一步中，我使用模型元素的值设置来自不同视图（也是 XML 和输入框）的文本。

<Text text="{TransportModel>/Serial}" />

效果很好。

但是如何对 TextArea 做同样的事情呢？我怎样才能根据这个模型做到这一点？我想从第一个 TextArea 使用的值也应该在另一个视图中的 TextArea 上。

Answer 1

UI5 支持双向数据绑定。 IE。如果用户在 UI 中更改了某些内容（例如，用户在文本区域中键入了某些内容），该更改将自动反映在其他侦听更改的绑定中。

<!-- In view 1 -->
<TextArea value="{TransportModel>/Serial}" />

<!-- In view 2 -->
<Text text="{TransportModel>/Serial}" />

无需手动获取输入值。只需让框架同步值即可。

Answer 2

如何使用本地json模型：

1. 创建

     initItemViewModel: function () {
                   return new JSONModel({
                       Serial: ""
                   });
               }
   
       this._oViewModel = this.initItemViewModel();
       this.setModel(this._oViewModel, "TransportModel");
   

   1. 使用

      this.getView().getModel("TransportModel").setProperty("/Serial", serial);

      <Text text="{TransportModel>/Serial}" width="auto" maxLines="1"/>