SAPUI5--单向绑定和双向绑定

SAPUI5–单向绑定和双向绑定

1.编写Test.view.xml

<mvc:View
	controllerName="sap.ui.taking.controller.Test"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<VBox id="inputBox">
	
	</VBox>
</mvc:View>

2.编写Test.controller.js

sap.ui.define(
  [
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/Input",
    "sap/ui/model/BindingMode",
  ],
  function (Controller,JSONModel,Input,BindingMode]) {
    "use strict";
    return Controller.extend("sap.ui.taking.controller.Test", {
      onInit: function () {
        this.initData();
        var oBox = this.byId("inputBox");
        var firstInput = new sap.m.Input({
          value: {
            path: '/text',
            mode: BindingMode.OneWay
          }
        });
        var lastInput = new sap.m.Input({
          value: {
            path: '/text',
            mode: BindingMode.TwoWay
          }
        });
        oBox.addItem(firstInput);
        oBox.addItem(lastInput);
      },
      initData: function () {
        var oModel = new JSONModel();
        var data = {
          text: "Hello",
        };
        oModel.setData(data);
        this.getView().setModel(oModel);
      },
    });
  }
);

3.展示效果

a.初始化

b.在上面的输入框输入 World，然后按下回车键

c.在下面的输入框输入SAP，然后按下回车键

4.总结

• 单向绑定：model绑定到view，model的改变会影响view，view的改变不会影响model
• 双向绑定：model绑定到view，model的改变会影响view，view的改变会影响model