SAP UI5：将 JSON 模型数据绑定到详细视图

Question

我正在尝试将 JSON 文件的数据显示到详细视图文件中。由于我是 SAP UI 5 的新手，我不明白为什么会在控制台中收到错误消息：“oModel.createKey is not a function”。

谁能解释一下这个错误的原因？

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

这是 ma​​in.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>

ma​​in.controller.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.controller.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"
    }

]

}

还有 ma​​nifest 文件：

    "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

Answer 1

据我了解，您的模型是 JSONModel。 JSONModel 没有 createKey 方法。该方法只存在于ODataModel类中。

相反，您必须使用 JSON 结构。所以如果你有一个数组，你必须使用索引。

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