是否可以将 sap.ui.base.ManagedObject 绑定到视图? [英] Is it possible to bind sap.ui.base.ManagedObject to the view?

问题描述

我有一个视图在 sap.m.Input 控件中显示员工姓名，如下所示

<mvc:View控制器名称="com.naveen.test.managedobject.controller.Employee"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"高度="100%"><输入值="{/name}"liveChange="onDataChange"类型=文本"/></mvc:查看>

模型类如下所示，基于

如您所见，绑定 ManagedObjectModel 可以无缝工作.

I have a view that shows the employee name in the sap.m.Input control as below

<mvc:View
  controllerName="com.naveen.test.managedobject.controller.Employee"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  height="100%"
>
  <Input
    value="{/name}"
    liveChange="onDataChange"
    type="Text"
  />
</mvc:View>

And the model class is as shown here based on this hint.

sap.ui.define([
  "sap/ui/base/ManagedObject"
], function(ManagedObject) {
  "use strict";

  return ManagedObject.extend("com.naveen.test.managedobject.model.Employee", {
    metadata: {
      properties: {
        name: {
          type: "string",
          defaultValue: ""
        }
      }
    },

    set name(iName) {
      this.setName(iName);
    },

    get name() {
      return this.getName();
    }

  });
});

And in the controller, I am just creating one object of Employee model and setting it on the view as below.

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
  "com/naveen/test/managedobject/model/Employee"
], function(Controller, JSONModel, Employee) {
  "use strict";

  return Controller.extend("com.naveen.test.managedobject.controller.Employee", {
    onInit: function() {
      var employee = new Employee({
        name : "Naveen"
      });
      this.model = new JSONModel(employee);
      this.getView().setModel(this.model);
    },

    onDataChange: function(oEvent) {
      var value = oEvent.getParameter("value");
      console.log("Value in control", value);
      console.log("Value in model", this.model.getData().getName());
    }

  });
});

But the view is not taking the data from the model and changes in the model are not updated in the view. Is there any error in this method or how can we bind the managed object's property to the view?

解决方案

Since 1.58, there are no workarounds needed anymore thanks to the ManagedObjectModel (MOM).

sap.ui.model.base.ManagedObjectModel
The ManagedObjectModel class can be used for data binding of properties and aggregations for managed objects.

Its constructor accepts anything that is extended from the ManagedObject meaning it can be even used with the UIComponent.

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/model/base/ManagedObjectModel"
], function(UIComponent, MOM) {
  "use strict";

  return UIComponent.extend("my.Component", {
    metadata: {
      manifest: "json",
      properties: {
        "myProperty": {
          type: "string",
          defaultValue: "Hello MOM" 
        }
      }
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.setModel(new MOM(this), "component");
    },

    // ...

  });
});

Then in the view: <Input value="{component>/myProperty}"/> which outputs "Hello MOM" by default.

Internally, MOM is also used in XMLComposite controls and in the new event handling concept.

---

Here is a demo with the "Employee" example mentioned in the question. The following ManagedObjects were created for the purpose of the demo:

• ManagedObject "Department" with aggregation "employees"
• ManagedObject "Employee" with property "name"

Link: https://embed.plnkr.co/bWFidnHVabwaoqQV

As you can see, binding ManagedObjectModel works seamlessly.

这篇关于是否可以将 sap.ui.base.ManagedObject 绑定到视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！