Sapui5 sap.m.TileContainer仅显示2个磁贴

Sapui5 sap.m.TileContainer仅显示2个磁贴,sapui5,sap-web-ide,Sapui5,Sap Web Ide,我想用一些信息来显示瓷砖。SAP示例并非真正有用,因为它没有遵循诸如使用manifest.json等准则 因此,我从头开始在SAP Web IDE中构建了一个应用程序。我正在使用TileContainer显示瓷砖。它的tile聚合绑定到本地JSON数据文件 数据文件包含一个包含三项的数组。但是,渲染后仅显示两个。有什么建议吗 这是my data.json: { "TileCollection": [{ "title": "Slovenská Republika",

我想用一些信息来显示瓷砖。SAP示例并非真正有用,因为它没有遵循诸如使用manifest.json等准则

因此,我从头开始在SAP Web IDE中构建了一个应用程序。我正在使用TileContainer显示瓷砖。它的
tile
聚合绑定到本地JSON数据文件

数据文件包含一个包含三项的数组。但是,渲染后仅显示两个。有什么建议吗

这是my data.json:

{
    "TileCollection": [{
        "title": "Slovenská Republika",
        "info": "support for SR",
        "flag": "",
        "icon": "sap-icon://inbox"
    }, {
        "title": "Deutschland",
        "info": "support for DE",
        "flag": "",
        "icon": "sap-icon://inbox"
    }, {
        "title": "Ceska Republika",
        "info": "support for CZ",
        "flag": "",
        "icon": "sap-icon://inbox"
    }]
}
这是我的XML视图:

<mvc:View
    controllerName="com.support_page.controller.App"
    height="100%"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns:tnt="sap.tnt"
    xmlns="sap.m">
    <Page
        showHeader="true"
        enableScrolling="false">
        <TileContainer
            id="container"
            tileDelete="handleTileDelete"
            tiles="{/TileCollection}">
            <StandardTile
                icon="{icon}"
                title="{title}"
                info="{info}"
                activeIcon="{flag}"/>
        </TileContainer>
    </Page>
</mvc:View>

非常感谢您的建议

同时,我也用瓷砖容器解决了这个问题

I solved this issue , even i was facing same issue , If you dont use local model you will not face issue or if you define your model in controller you will not face the issue.
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
    "use strict";

    return Controller.extend("SmartPurchaseReq.controller.Home", {

        /**
         * Called when a controller is instantiated and its View controls (if available) are already created.
         * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
         * @memberOf SmartPurchaseReq.view.Home
         */
            onInit: function() {
                var that = this;
                var data = {
    "TileCollection" : [
        {
            "icon" : "sap-icon://hint",
            "type" : "Monitor",
            "title" : "Tiles: a modern UI design pattern for overview & navigation."
        },
        {
            "icon" : "sap-icon://inbox",
            "number" : "89",
            "title" : "Approve Leave Requests",
            "info" : "Overdue",
            "infoState" : "Error"
        },
        {
            "type" : "Create",
            "title" : "Create Leave Requests",
            "info" : "28 Days Left",
            "infoState" : "Success"
        },
        {
            "icon" : "sap-icon://travel-expense-report",
            "number" : "281",
            "numberUnit" : "euro",
            "title" : "Travel Reimbursement",
            "info" : "1 day ago"
        },
        {
            "icon" : "sap-icon://loan",
            "number" : "2380",
            "numberUnit" : "euro",
            "title" : "My Salary",
            "info" : "8 days ago"
        },
        {
            "icon" : "sap-icon:`enter code here`//lab",
            "number" : "1",
            "numberUnit" : "Invention",
            "title" : "Test Lab Reports",
            "info" : "8 Days Ago"
        },
        {
            "icon" : "sap-icon://inbox",
            "type" : "Monitor",
            "title" : "Leave Request History"
        },
        {
            "type" : "Create",
            "title" : "Create Purchase Order",
            "info" : "890€ Open Budget",
            "infoState" : "Success"
        },
        {
            "icon" : "sap-icon://stethoscope",
            "number" : "3",
            "title" : "Yearly Health Check",
            "info" : "3 year overdue",
            "infoState" : "Error"
        },
        {
            "icon" : "sap-icon://meal",
            "type" : "Monitor",
            "title" : "Meal Schedule"
        }

    ]
};
                 var DummyModel = new JSONModel(); 
                 DummyModel.setData(data);
                // var sPath = jQuery.sap.getModulePath("model", "/Dummy.json");
                // var DummyModel = new JSONModel(sPath);
                that.getView().byId("container").setModel(DummyModel);
            },
            OnTilePress: function(evt) {
                var idj = evt.getSource();
                var d =5;
            }

        /**
         * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
         * (NOT before the first rendering! onInit() is used for that one!).
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onBeforeRendering: function() {
        //
        //  },

        /**
         * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
         * This hook is the same one that SAPUI5 controls get after being rendered.
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onAfterRendering: function() {
        //
        //  },

        /**
         * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onExit: function() {
        //
        //  }

    });

});
我所做的是,我没有使用默认模型。 我在component.js中初始化了模型 然后使用model>/TileCollection,虽然我仍然有点困惑,但它仍然有效。
不过,也感谢您的回答。

Hmm,我不明白为什么它只显示当前代码中的两个分幅。浏览器控制台中是否有错误消息?更新页面时,您是否正在更新?
yourTileContainer.getBinding(“tiles”).getLength()返回什么?顺便说一句,从1.50版开始,除了
sap.m.GenericFile
之外的所有tile都不推荐使用。作为旁注..控制台中没有错误,缓存没有被禁用。onInit或onBeforeRendering或OnAfterRendering中的yourTileContainer.getBinding(“tiles”).getLength()=0如果不推荐使用tileContainer,应使用什么替代?还有,你是从哪里得到这些信息的?我的意思是,最好禁用缓存,这样浏览器在更新时不会显示过时的数据。关于弃用:您可以在我在前面的评论中链接到的当前每晚版本的API引用中看到这一通知。上面写着“从1.50开始就被弃用了。替换为您选择的带有实例的容器”。很高兴您能解决这个问题。你也可以接受你自己的答案来告诉别人。但有点让人困惑的是什么?
I solved this issue , even i was facing same issue , If you dont use local model you will not face issue or if you define your model in controller you will not face the issue.
sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(Controller,JSONModel) {
    "use strict";

    return Controller.extend("SmartPurchaseReq.controller.Home", {

        /**
         * Called when a controller is instantiated and its View controls (if available) are already created.
         * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
         * @memberOf SmartPurchaseReq.view.Home
         */
            onInit: function() {
                var that = this;
                var data = {
    "TileCollection" : [
        {
            "icon" : "sap-icon://hint",
            "type" : "Monitor",
            "title" : "Tiles: a modern UI design pattern for overview & navigation."
        },
        {
            "icon" : "sap-icon://inbox",
            "number" : "89",
            "title" : "Approve Leave Requests",
            "info" : "Overdue",
            "infoState" : "Error"
        },
        {
            "type" : "Create",
            "title" : "Create Leave Requests",
            "info" : "28 Days Left",
            "infoState" : "Success"
        },
        {
            "icon" : "sap-icon://travel-expense-report",
            "number" : "281",
            "numberUnit" : "euro",
            "title" : "Travel Reimbursement",
            "info" : "1 day ago"
        },
        {
            "icon" : "sap-icon://loan",
            "number" : "2380",
            "numberUnit" : "euro",
            "title" : "My Salary",
            "info" : "8 days ago"
        },
        {
            "icon" : "sap-icon:`enter code here`//lab",
            "number" : "1",
            "numberUnit" : "Invention",
            "title" : "Test Lab Reports",
            "info" : "8 Days Ago"
        },
        {
            "icon" : "sap-icon://inbox",
            "type" : "Monitor",
            "title" : "Leave Request History"
        },
        {
            "type" : "Create",
            "title" : "Create Purchase Order",
            "info" : "890€ Open Budget",
            "infoState" : "Success"
        },
        {
            "icon" : "sap-icon://stethoscope",
            "number" : "3",
            "title" : "Yearly Health Check",
            "info" : "3 year overdue",
            "infoState" : "Error"
        },
        {
            "icon" : "sap-icon://meal",
            "type" : "Monitor",
            "title" : "Meal Schedule"
        }

    ]
};
                 var DummyModel = new JSONModel(); 
                 DummyModel.setData(data);
                // var sPath = jQuery.sap.getModulePath("model", "/Dummy.json");
                // var DummyModel = new JSONModel(sPath);
                that.getView().byId("container").setModel(DummyModel);
            },
            OnTilePress: function(evt) {
                var idj = evt.getSource();
                var d =5;
            }

        /**
         * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
         * (NOT before the first rendering! onInit() is used for that one!).
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onBeforeRendering: function() {
        //
        //  },

        /**
         * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
         * This hook is the same one that SAPUI5 controls get after being rendered.
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onAfterRendering: function() {
        //
        //  },

        /**
         * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
         * @memberOf SmartPurchaseReq.view.Home
         */
        //  onExit: function() {
        //
        //  }

    });

});