如何使用本地文件中的 json 对象作为 openui5 中的数据模型？

Posted 2023-03-08

【中文标题】如何使用本地文件中的 json 对象作为 openui5 中的数据模型？

【英文标题】：How to use a json object from a local file as a datamodel in openui5?

【发布时间】：2019-06-23 16:02:07

【问题描述】：

我对示例 https://github.com/SAP/openui5-masterdetail-app 有疑问

我想使用'webapp/localService/mockdata'文件夹中的两个json文件Objects.json和LineItems.json

我有一个本地安装（没有 WEB IDE）。它工作正常。

我做了以下更改

webapp/manifest.json

...

"resources": "resources.json",
"dataSources": 
    "tableData_alias": 
        "uri": "localService/mockdata/Objects.json",
        "type": "JSON"
    


...

"models": 
    "i18n": 
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": 
            "bundleName": "sap.ui.demo.masterdetail.i18n.i18n"
        
    ,
    "tableData": 
        "type": "sap.ui.model.json.JSONModel",
        "dataSource": "tableData_alias",
        "preload": true
    
,

webapp/view/Master.view.xml

...
items="
        path: 'DataModel>/',
        sorter: 
            path: 'Name',
            descending: false
        ,
        groupHeaderFactory: '.createGroupHeader'
    "
...

webapp/controller/Master.controller.js

onInit : function () 
var dataModel = this.getOwnerComponent().getModel("tableData");
this.getView().setModel(dataModel, "DataModel");

// Control state model
var oList = this.byId("list"),
...

将加载文件 Objects.json，但不会渲染主表。 （“详细”列表是我稍后要做的下一步......）

The json file

在浏览器的控制台中，我收到以下错误： _未能加载容器容器的组件。原因：TypeError：无法获取未定义或空引用的属性“attachMetadataFailed” - _

请帮忙，什么是不正确的。 （也许整个例子都在 github 上？）

【问题讨论】：

主表不显示是什么意思？您的意思是表格未呈现或表格已呈现，但未显示任何数据。还有你的 JSON 是什么样子的，它是否包含一个链接到属性“对象”的数组？

JSON 不包含 /Objects。因此这可能会解决它：path: 'DataModel>/',.

【参考方案1】：

在webapp/controller/Master.controller.js中，请尝试在onAfterRendering: function()而不是onInit: function()中进行操作

谢谢

【参考方案2】：

试试下面的解决方案。我没有看到任何代码错误，但是您在 onInit 函数中将 json 模型设置为上下文视图，该函数可能为空。

在您的 webapp/view/Master.view.xml 中，您可以使用您在 manifest.json 中定义的模型直接绑定聚合 item 路径 p>

 ...
items="
        path: 'tableData>/',
        sorter: 
            path: 'Name',
            descending: false
        ,
        groupHeaderFactory: '.createGroupHeader'
    "
...

谢谢。