问题描述
我有一个视图在 sap.m.Input
控件中显示员工姓名,如下所示
<mvc:View控制器名称="com.naveen.test.managedobject.controller.Employee"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"高度="100%">
模型类如下所示,基于
如您所见,绑定 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).
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 绑定到视图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!