视图不显示来自 Manifest.json 的模型数据

Question

我正在尝试设置我的应用程序描述符文件 (manifest.json) 以在其 "models" 对象中包含命名模型 'inputs'。根据我的理解，这样做之后，如果提供了正确的路径，该模型应该在整个应用程序中可用（参见 XML 视图）。

我想设置此 manifest.json 的原因是，最好在此处配置所有模型。

在控制器中，我想获取并设置在 manifest.json 中定义的 'inputs' 模型——但是如何实现？

manifest.json（我配置的是'inputs'模型）

{
    "_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（其中 'inputs' 模型应从清单文件中设置）

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");


            },

            ...

inputs.json

{
    "propA" : "testVal"
}

XML 查看

<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 中定义模型，然后在控制器中设置该模型，以便在我的 xml 视图中使用它？

Answer 1

尝试在您的属性姓名前加一个正斜杠...

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

...并更新您的清单文件，以便您的模型定义指向您在 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 文件以指向您的清单文件...

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);

        }
    });
});

...并删除控制器中的 onInit 逻辑以设置模型（这由组件处理）

Answer 2

您在 manifest.json 文件中定义的那些模型是在组件上下文中创建的（如果您的应用程序基于组件）。要使其在 XML 视图中可用，您必须从 Component 获取它，然后附加到视图。您可以在 onInit 控制器事件中使用的代码片段如下所示：

this.getView().setModel(this.getOwnerComponent().getModel("<your_model_name>"), "<your_model_name>");

如果您使用的是标准模板，那么很可能您有一个 BaseController 作为祖先，在这种情况下，代码看起来会更短：

this.setModel(this.getComponentModel("<your_model_name>"), "<your_model_name>");

Answer 3

这是您想要实现的目标的最小示例：https://embed.plnkr.co/l1XF5O/

manifest.json（又名"app descriptor"）中定义的模型将设置为组件（自 v1.30 起）。
如果使用了描述符，则组件 metadata 的几乎所有属性（manifest: "json" 除外）都将被弃用，应避免使用。已弃用的属性已列出 here.
组件实例化的根视图内的视图（及其内部控件）自动从组件继承模型。因此，不再需要为您的视图显式设置模型。您的视图已经知道为组件设置的模型。*
根据您的情况应正确使用绑定语法：
- 仅当父控件已经有上下文绑定（例如，父控件使用聚合绑定或元素绑定）时，才使用 relative 绑定语法 (modelName>property)。
- 在其他情况下，使用绝对绑定语法。它以斜杠 (modelName>/property) 开头，因此控件不会查找其父级的绑定上下文。

*虽然在组件上设置的模型可以在 XMLView 中无缝使用，但通过在 onInit 处理程序中调用 view.getModel 来检索组件模型将 return undefined。更多相关信息：

视图不显示来自 Manifest.json 的模型数据

View not displaying Model Data from Manifest.json

data-binding

manifest

sapui5