代码之家  ›  专栏  ›  技术社区  ›  Swappy

页面为空,未引发任何错误

  •  1
  • Swappy  · 技术社区  · 7 年前

    我试图在一个tile容器中显示几个tile,这个容器从一个虚拟的JSON文件中提取数据。我已经在 this sample .但我的页面似乎是空的。而且,它不会在控制台中显示任何错误。下面是我的代码片段。

    视图1.controller.js

    sap.ui.define([
      "sap/ui/core/mvc/Controller"
    ], function(Controller) {
      "use strict";
    
      return Controller.extend("AdminMovie.controller.View1", {
    
      });
    });
    

    视图1.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>
    

    瓷砖容器.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);
        }
    
      });
    });
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   Boghyon Hoffmann    6 年前

    导致空白页的原因与 tileContainer有关

    意外的子控件

    除了 Missing Root Control ,the ><tileContainer> currently contains a list of hboxes in your view.

    <HBox>
    <标准平铺…/>
    </HBox>
    </TileContainer>
    

    默认值aggregation oftilecontainer>a>is,然而,a control that is derived fromsap.m.tile

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

    未捕获错误:“element sap.m.hbox uuhbox1”对于element sap.m.tileContainer uuuxmlview1——容器的聚合“tiles”无效

    请从ListBinding模板中删除

    <标准平铺…/>
    </TileContainer>
    

    TileContainer只包含一个Tile

    框架中有一个bug,它不允许tilecontainer显示任何内容,如果它只包含一个tile。从UI5版本1.48开始,修复程序应可用。

    ,的<TileContainer>当前在您的视图中包含hboxes列表。

    <TileContainer id="container" tiles="{/MovieCollection}">
      <HBox>
         <StandardTile .../>
      </HBox>
    </TileContainer>
    

    违约aggregation of TileContainer但是,是派生自sap.m.Tile.

    UI5 TileContainer aggregation

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

    未捕获错误:“element sap.m.hbox uuhbox1”对于element sap.m.tileContainer uuuxmlview1——容器的聚合“tiles”无效

    请移除<HBox>从ListBinding模板:

    <TileContainer id="container" tiles="{/MovieCollection}">
      <StandardTile .../>
    </TileContainer>
    

    TileContainer只包含一个Tile

    有一个bug in the framework这并没有让瓷砖容器如果只包含一个图块,则显示任何内容。从UI5 1.48版开始,该修复程序应可用。

        2
  •  2
  •   Boghyon Hoffmann    6 年前

    你的根视图是 缺少根控件 例如 sap.m.App API 其中:

    如果没有根控件,内容将不正确显示。因此,添加 <App> 在您的情况下应该足够:

    <!-- root view -->
    <mvc:View
      xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
      height="100%"
      displayBlock="true"
      controllerName="..."
    >
      <App id="myApp"> <!-- Not in other views! -->
        <!-- content -->
      </App>
    </mvc:View>
    

    为什么 linked sample 正在工作,是控制吗? SAP.M.应用程序 已添加到 index.html文件 .然而,演示工具包中显示的示例经常会丢失 index.html文件 在要显示的代码页中,这可能会造成混淆。


    或者,您也可以添加 index.html文件 而且在 根视图 以下内容:

    1. <html style="height: 100%;">
    2. new ComponentContainer({
        height: "100%",
        // ...
      })
    3. <mvc:View height="100%" ...>

    这将使内容也可见,但不需要使用 SAP.M.应用程序 在根视图中。