页面是空白的，没有抛出任何错误 [英] Page Is Blank Without Throwing Any Errors

问题描述

我试图在从虚拟 JSON 文件中获取数据的图块容器中显示几个图块.我已经在

因此，您应该在浏览器控制台中收到以下错误消息:

<块引用>

未捕获的错误:元素 sap.m.HBox#__hbox1"对聚合tiles"无效元素 sap.m.TileContainer#__xmlview1--container

请删除 作为绑定模板:

<标准瓷砖/><!-- ✔️ -->

TileContainer 只包含一个 Tile

TileContainer 中存在一个错误(问题 #1813) 如果只有一个 Tile，则无法使聚合在 Chrome 中可见(在 Firefox 中有效).此修复随 OpenUI5 版本 1.56+、1.54.2+、1.52.8+、1.50.9+、1.48.19+ 和 1.46.2+ 一起提供.

I am trying to display few tiles in a tile container which fetches data from a dummy JSON file. I have coded exactly shown in this sample. But my page appears empty. Also it doesn't show any errors in the console. Below are the snippets of my code.

View1.controller.js

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

  return Controller.extend("AdminMovie.controller.View1", {

  });
});

View1.view.xml

<mvc:View
  displayBlock="true" 
  controllerName="AdminMovie.controller.View1"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
>
  <Page showHeader="false" enableScrolling="false">
    <mvc:XMLView viewName="AdminMovie.view.TileContainer"/>
    <footer>
      <OverflowToolbar id="otbFooter">
        <ToolbarSpacer/>
        <Button type="Accept" text="Add New Movie"/>
      </OverflowToolbar>
    </footer>
  </Page>
</mvc:View>

TileContailner.view.xml

<mvc:View
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="AdminMovie.controller.TileContainer"
>
  <App>
    <pages>
      <Page
        showHeader="false"
        enableScrolling="false"
        title="Stark"
      >
        <TileContainer id="container"
          tileDelete="handleTileDelete"
          tiles="{/MovieCollection}"
        >
          <HBox>
            <StandardTile
              icon="{icon}"
              type="{type}"
              number="{number}"
              numberUnit="{numberUnit}"
              title="{title}"
              info="{info}"
              infoState="{infoState}"
            />
          </HBox>
        </TileContainer>
        <OverflowToolbar>
          <Toolbar>
            <ToolbarSpacer/>
            <Button
              text="Edit"
              press=".handleEditPress"
            />
            <ToolbarSpacer/>
          </Toolbar>
        </OverflowToolbar>
      </Page>
    </pages>
  </App>
</mvc:View>

TileContainer.js

sap.ui.define([
  "jquery.sap.global",
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(jQuery, Controller, JSONModel) {
  "use strict";

  return Controller.extend("AdminMovie.controller.TileContainer", {
    onInit: function(evt) {
      // set mock model
      var sPath = jQuery.sap.getModulePath("AdminMovie", "/MovieCollection.json");
      var oModel = new JSONModel(sPath);
      this.getView().setModel(oModel);
    },

    handleEditPress: function(evt) {
      var oTileContainer = this.byId("container");
      var newValue = !oTileContainer.getEditable();
      oTileContainer.setEditable(newValue);
      evt.getSource().setText(newValue ? "Done" : "Edit");
    },

    handleTileDelete: function(evt) {
      var tile = evt.getParameter("tile");
      evt.getSource().removeTile(tile);
    }

  });
});

解决方案

⚠️ For other readers: if you're not using a TileContainer, see my previous answer for general solutions → https://stackoverflow.com/a/50951902/5846045

Causes for empty TileContainer

Unexpected child control

Besides the missing root control, the <TileContainer> in your code contains a list of HBoxes.

<TileContainer>
  <HBox> <!-- ❌ Wrong aggregation child! -->
    <StandardTile />

The default aggregation of TileContainer is, however, a control that is derived from sap.m.Tile.

Hence, you should be getting the following error message in the browser console:

Uncaught Error: "Element sap.m.HBox#__hbox1" is not valid for aggregation "tiles" of Element sap.m.TileContainer#__xmlview1--container

Please, remove the <HBox> as the binding template:

<TileContainer>
  <StandardTile /> <!-- ✔️ -->

TileContainer contains only one Tile

There was a bug (issue #1813) in the TileContainer which failed making the aggregation visible in Chrome (works in Firefox) if there was only a single Tile. The fix is delivered with OpenUI5 version 1.56+, 1.54.2+, 1.52.8+, 1.50.9+, 1.48.19+, and 1.46.2+.

这篇关于页面是空白的，没有抛出任何错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！