SAP UI5：将JSON模型数据绑定到详细视图 [英] SAP UI5 : binding JSON model data to detail view

问题描述

我正在尝试将JSON文件的数据显示到详细视图文件中。由于我是SAP UI 5的新手，我不明白为什么会出现错误："；oModel.createKey不是控制台中的函数。

有人能给我解释一下这个错误的原因吗？

我寻找了一些解决方案，这就是我目前所做的。

这里是main.view.xml文件：

                    <Table id="tab1" items="{path: 'articles>/Articles'}">
                        <columns>
                            <Column width="11rem">
                                <Label text="ID" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Description" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Date début de validité" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Date fin de validité" />
                            </Column>
                            <Column width="11rem">
                                <Label text="Montant" />
                            </Column>
                        </columns>
                        <ColumnListItem press=".onPress" type="Navigation">
                            <Text text="{articles>id}" />
                            <Text text="{articles>description}" />
                            <Text text="{articles>debutValidite}" />
                            <Text text="{articles>finValidite}" />
                            <Text text="{articles>prix}" />
                        </ColumnListItem>
                    </Table>

main.control er.js文件：

    onInit: function () {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.loadData("./model/Articles.json");
        this.getView().setModel(oModel,"articles");
    },
    
    onPress: function(oEvent){
        var oItem = oEvent.getSource();
        var oContext = oItem.getBindingContext("articles");
        var sKeyId = oContext.getObject("id");
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("detail", {articleId: sKeyId});

Detail.view.xml文件：

                    <f:SimpleForm id="form1">
                        <!--<f:content>-->
                            <Label text="ID"/>
                            <Text text="{articles>id'}"/>
                            <Label text="Description"/>
                            <Text text="{articles>description}"/>
                            <Label text="Date début de validité"/>
                            <Text text="{articles>debutValidite}"/>
                            <Label text="Date fin de validite"/>
                            <Text text="{articles>finValidite}"/>
                            <Label text="Montant"/>
                            <Text text="{articles>prix}"/>
                        <!--</f:content>-->
                    </f:SimpleForm>

Detail.Controler.js文件：

onInit: function () {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);

    },
_onObjectMatched: function (oEvent){
        
        var oModel = this.getView("detail").getModel("articles");
        console.log(oModel);
        var that= this;
        
        var sKeyId = oEvent.getParameter("arguments").articleId;
        console.log(sKeyId);

        oModel.dataLoaded().then(function(){
            var sPath = oModel.createKey("/Articles", {
                id: sKeyId  
            });
            that.getView().bindElement({ path: sPath});
        });
},
        


    onBack: function () {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("main");
    }

Articles.json文件：

{
"Articles": [{
        "id": "AR00000111",
        "description": "Pièce de rechange",
        "debutValidite": "01.02.2020",
        "finValidite": "01.05.2021",
        "prix": "150"
    }, {
        "id": "AR00000112",
        "description": "Chaise",
        "debutValidite": "01.03.2020",
        "finValidite": "01.05.2021",
        "prix": "200"
    }, {
        "id": "AR00000113",
        "description": "Pièce de rechange",
        "debutValidite": "01.02.2020",
        "finValidite": "01.09.2021",
        "prix": "250"
    }

]

}

和清单文件：

    "sap.ui5": {
    
    ...
    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "settings": {
                "bundleName": "demo.testdemo.i18n.i18n"
            }
        },
        "articles": {
            "preload": true,
            "type": "sap.ui.model.json.JSONModel",
            "uri": "model/Articles.json"
        }
        ...
        "routes": [{
            "name": "main",
            "pattern": "",
            "target": ["main"]
        }, {
            "name": "detail",
            "pattern": "detail/{articleId}",
            "target": ["detail"]
        }],
        "targets": {
            "main": {
                "viewName": "main"
            },
            "detail": {
                "viewName": "detail"
            }
        }

这里是Detail.view.xml： https://i.stack.imgur.com/dvPbL.png

和main.view.xml： https://i.stack.imgur.com/0A5tf.png

推荐答案

据我所知，您的模型是JSONModel。JSONModel没有方法createKey。此方法仅存在于类ODataModel中。

相反，您必须使用JSON结构。因此，如果您有数组，则必须使用索引。

const iIndex = oModel.getProperty("/Articles").findIndex(article => article.id === sKeyId);
const sPath = `/Articles/${iIndex}`;

这篇关于SAP UI5：将JSON模型数据绑定到详细视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！