sap ui5教程(6)Model(Resource model + JSONmodel + ODataModel)
阅读原文时间:2021年04月20日阅读:1

1、RsourceModel数据绑定

i18n文件:
存放不经常变化的文字,如在<page></page>中的title =”{i18n>title}”,按钮文字,输入框提示文字,placeholder newTitle = hijuly

manifest.json 文件
modes中配置当前项目的基础models,resourcemodel如下:

 "models": {
    "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
            "bundleName": "new_test02.i18n.i18n"
        }
    }
}

其中bundleName指明文件所在路径,页面上的所有数据都由model提供,服务器取回来的数据必须封装成jsonmodel才能绑定在页面上
jsonmodel的配置,type表示它的种类,uri表示它的路径如下:

"model名":{
    "type": "sap.ui.model.json.JSONModel",
    "uri": "Invoices.json"  //数据文件路径
}

App.view.xml文件

-title="{模块名>属性名}"

<Page title="{i18n>title}">
    <content></content>
</Page>

2、JSON Model绑定

(1)controller文件
new JSONModel()、setModel() 、setData()
引入JSONModel类:

"sap/ui/model/json/JSONModel",

创建JSONModel并设置数据data:

var oModel = new JSONModel();
oModel.setData(data);

JSONModel绑定到页面:

this.getView().setModel(oModel,"dataModel");

onInit方法:controller被加载后自动执行该方法,如进入页面自动获取初始化数据的代码
(2)App.view.xml文件(绑定到列表)
{path:'tableModel>/'} 、{模块名>属性名}
需要显示循环的控件都有items属性值指向model路径{path:’tableModel>/’},一般path所指最终是一个对象数组,表示对model中的每个对象进行循环,其中每个Objec Identifier控件的title等于{模块名>属性名}

<Table items="{path:'tableModel>/'}">
    <items>
        <ColumnListItem type="Navigation">
            <cells>
                <ObjectIdentifier title="{tableModel>name}"/>
                <ObjectIdentifier title="{tableModel>age}"/>
                <ObjectIdentifier title="{tableModel>mail}"/>
                <ObjectIdentifier title="{tableModel>tel}"/>
                <ObjectIdentifier title="{tableModel>sex}"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

(3)App.view.xml文件(绑定到数据)
text="{模块名>/属性}" 注意/

<Label id="test_label" text="{label>/text}"></Label>

3、ODataModel绑定

(1)简介
OData设计和使用RESTful API的标准,只要RESTful API符合OData标准,就可以按照OData标准中定义的方式去使用这个API获取/修改资源。
通过ODataModel和后端SAP系统交互,其将http请求封装成了方法

  • get -> read 获取数据
  • post -> create 新建发送数据
  • put -> updata 修改数据
  • delete -> remove 删除数据

(2)使用
this.getOwnerComponent().getModel("model名") ODataModel.read() 、create()、updata()、remove()

mianfest.json文件中
在sap.app中:

"dataSources": {
    "invoiceRemote(数据源名)": {
        "uri": "https://services.odata.org/V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
            "odataVersion": "2.0"
        }
    }
}

sap.ui5中:

"invoice(model名)": {
    "dataSource": "invoiceRemote(数据源名)"
}

获取model:

var oModel = this.getOwnerComponent().getModel("model名");

服务器请求:

oModel.ODataModel.read("/路径",{
    success:function(res){
    },
    error:function(){
    }
})

oModel.ODataModel.create("/路径",数据,{
    success:function(res){
    },
    error:function(){
    }
})

oModel.ODataModel.updata("/路径",数据,{
    success:function(res){
    },
    error:function(){
    }
})

oModel.ODataModel.remove("/路径(删除条件)",{
    success:function(res){
    },
    error:function(){
    }
})