data-binding - 查看不显示来自 Manifest.json 的模型数据

Question

我正在尝试设置我的应用程序描述 rune 件 (manifest.json) 以在其“模型”对象中包含一个命名模型“输入”。根据我的理解，这样做之后，当提供正确的路径时，模型应该在整个应用程序中可用(请参阅 XML View )。

我想设置这个 manifest.json 的原因是因为在此处配置所有模型是最佳实践。

在 Controller 中，我想获取然后设置 manifest.json 中定义的“输入”模型——但是如何做到这一点？

manifest.json (我在那里配置了“输入”模型)

{
    "_version": "1.1.0",
    "sap.app": {
        "_version": "1.1.0",
        "id": "pricingTool",
        "type": "application",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "ach": "ach",
        "resources": "resources.json",
        "sourceTemplate": {
            "id": "ui5template.basicSAPUI5ApplicationProject",
            "version": "1.30.3"
        },
    },

    "sap.ui": {
        "_version": "1.1.0",
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        },
        "supportedThemes": [
            "sap_hcb",
            "sap_bluecrystal"
        ]
    },

    "sap.ui5": {
        "_version": "1.1.0",
        "rootView": {
            "viewName": "pricingTool.view.Main",
            "type": "XML"
        },
        "dependencies": {
            "minUI5Version": "1.30.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.ui.layout": {}
            }
        },
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "inputs": {
                        "type": "sap.ui.model.json.JSONModel",
                        "uri":  "model/inputs.json"
            },

        },
    }

Main.controller.js (其中“输入”模型应从 list 文件中设置)

sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel',
        'sap/ui/model/Filter',
        'sap/ui/model/FilterOperator',
        'sap/m/MessageToast',
        'pricingTool/model/viewControls',
        'pricingTool/model/formatter',
        'pricingTool/model/Utility',
        'sap/ui/core/util/Export',
        'sap/ui/core/util/ExportTypeCSV',
    ],

    function (jQuery, Controller, JSONModel, Filter, FilterOperator, MessageToast, viewControls, formatter, Utility, Export, ExportTypeCSV) {

        "use strict";

        var mainController = Controller.extend("pricingTool.controller.Main", {

            onInit: function(oEvent) {

                //define named/default model(s)
                var inputs = new JSONModel("./model/inputs.json");

                //set model(s) to current xml view
                this.getView().setModel(inputs, "inputs");

//this is one solution I have tried, but doesn't do anything: 
// this.getView().setModel(this.getOwnerComponent().getModel("inputs"), "inputs");

//another solution I have tried:
//var inputs = this.getModel('input')  <--I was hoping this would find the inputs defined in the manifest.json, but this doesn't work either
// this.getView().setModel(inputs, "inputs");


            },

            ...

input.json

{
    "propA" : "testVal"
}

XML View

<Button text="{inputs>propA}"></Button>

Components.js (不确定要在 Component.js 中做什么)

sap.ui.define([
            'sap/ui/core/UIComponent'
    ],
    function(UIComponent) {
    "use strict";


    var Component = UIComponent.extend("pricingTool.Component", {

        metadata : {

            metadata : {
                manifest: "json"
            },
            rootView : "pricingTool.view.Main",
            dependencies : {
                libs : [
                    "sap.m",
                    "sap.ui.layout"
                ]
            },
            config : {
                sample : {
                    files : [
                        "Main.view.xml",
                        "Main.controller.js"
                    ]
                }
            }
        },

        init : function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

        }
    });

    return Component;

});

问题是当我在按钮控件上测试模型属性(“propA”)时没有显示。谁能告诉我为什么模型没有显示在应用程序中？

总结问题

如何在 manifest.json 中定义模型，然后在 Controller 中设置该模型，以便我可以在我的 xml View 中使用它？

Answer 1

尝试在您的属性名称前放置一个正斜杠...

<Button text="{inputs>/propA}"></Button>

...并更新您的 list 文件，以便您的模型定义指向您在 sap.app 下定义的数据源，如下所示...

{
"_version": "1.1.0",
"sap.app": {
    "_version": "1.1.0",
    "id": "pricingTool",
    "type": "application",
    "applicationVersion": {
        "version": "1.0.0"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "ach": "ach",
    "resources": "resources.json",
    "sourceTemplate": {
        "id": "ui5template.basicSAPUI5ApplicationProject",
        "version": "1.30.3"
    },
    "dataSources": {
        "inputsData": {
            "type" : "JSON",
            "uri": "model/inputs.json"
        }
    }
},

"sap.ui": {
    "_version": "1.1.0",
    "technology": "UI5",
    "icons": {
        "icon": "",
        "favIcon": "",
        "phone": "",
        "phone@2": "",
        "tablet": "",
        "tablet@2": ""
    },
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
    },
    "supportedThemes": [
        "sap_hcb",
        "sap_bluecrystal"
    ]
},

"sap.ui5": {
    "_version": "1.1.0",
    "rootView": {
        "viewName": "pricingTool.view.Main",
        "type": "XML"
    },
    "dependencies": {
        "minUI5Version": "1.30.0",
        "libs": {
            "sap.ui.core": {},
            "sap.m": {},
            "sap.ui.layout": {}
        }
    },
    "contentDensities": {
        "compact": true,
        "cozy": true
    },
    "models": {
        "products": {
            "type": "sap.ui.model.json.JSONModel",
            "uri":  "model/products.json"
        },
        "inputs": {
                    "type": "sap.ui.model.json.JSONModel",
                    "dataSource" : "inputsData"
        }
      }
    }
}

...更改您的 Component.js 文件以指向您的 list 文件...

sap.ui.define([
        'sap/ui/core/UIComponent'
    ],
    function(UIComponent) {
    "use strict";


    var Component = UIComponent.extend("pricingTool.Component", {

        metadata : {
            manifest: "json",
        },

        init : function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

        }
    });
});

...并删除 Controller 中的 onInit 逻辑以设置模型(这是由组件处理的)