页面是空白而不会抛出任何错误

时间：2018-06-19 07:01:03

标签： sapui5

我试图在tile容器中显示几个tile，它从一个伪JSON文件中获取数据。我的编码完全显示在this sample中。但我的页面显示为空。此外，它不会在控制台中显示任何错误。以下是我的代码片段。

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

  });
});

2 个答案:

答案 0 :(得分：2)

您的根视图缺少根控件，例如sap.m.App API ，其中：

没有root控件，内容将无法正确显示。因此，在您的情况下，添加<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工作的原因是，在{em> index.html 中已经添加了控件sap.m.App。但是，演示工具包中显示的示例经常会错过要显示的代码页中的 index.html 。

或者，您也可以在 index.html 和根视图中添加以下内容：

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

这也将使内容可见，但无需在根视图中使用sap.m.App。

答案 1 :(得分：1)

与if ($dh_c_01_01['id'] == $a_c_a_max) { $dh_sq_01_01 = $a_b_s_05; } elseif ($dh_c_01_01['id'] == $a_c_a_1_b) { $dh_sq_01_01 = $a_b_s_06; } elseif ($dh_c_01_01['id'] == $a_c_a_2_b) { $dh_sq_01_01 = $a_b_s_07; } elseif ($dh_c_01_01['id'] == $a_c_a_3_b) { $dh_sq_01_01 = $a_b_s_08; } elseif ($dh_c_01_01['id'] == $a_c_a_4_b) { $dh_sq_01_01 = $a_b_s_09; } elseif ($dh_c_01_01['id'] == $a_c_a_5_b) { $dh_sq_01_01 = $a_b_s_10; } elseif ($dh_c_01_01['id'] == $a_c_a_6_b) { $dh_sq_01_01 = $a_b_s_11; } elseif ($dh_c_01_01['id'] == $a_c_a_7_b) { $dh_sq_01_01 = $a_b_s_12; } elseif ($dh_c_01_01['id'] == $a_c_a_8_b) { $dh_sq_01_01 = $a_b_s_13; } elseif ($dh_c_01_01['id'] == $a_c_a_9_b) { $dh_sq_01_01 = $a_b_s_14; } if ($dh_c_02_01['id'] == $a_c_a_max) { $dh_sq_02_01 = $a_b_s_05; } elseif ($dh_c_02_01['id'] == $a_c_a_1_b) { $dh_sq_02_01 = $a_b_s_06; } elseif ($dh_c_02_01['id'] == $a_c_a_2_b) { $dh_sq_02_01 = $a_b_s_07; } elseif ($dh_c_02_01['id'] == $a_c_a_3_b) { $dh_sq_02_01 = $a_b_s_08; } elseif ($dh_c_02_01['id'] == $a_c_a_4_b) { $dh_sq_02_01 = $a_b_s_09; } elseif ($dh_c_02_01['id'] == $a_c_a_5_b) { $dh_sq_02_01 = $a_b_s_10; } elseif ($dh_c_02_01['id'] == $a_c_a_6_b) { $dh_sq_02_01 = $a_b_s_11; } elseif ($dh_c_02_01['id'] == $a_c_a_7_b) { $dh_sq_02_01 = $a_b_s_12; } elseif ($dh_c_02_01['id'] == $a_c_a_8_b) { $dh_sq_02_01 = $a_b_s_13; } elseif ($dh_c_02_01['id'] == $a_c_a_9_b) { $dh_sq_02_01 = $a_b_s_14; } [$dh_sq_03_01, ... , $dh_sq_20_01] 相关的空白页的原因

意外的子控件

除了missing root control之外，TileContainer当前还包含您视图中的HBox列表。 

<TileContainer>

但是默认的aggregation of TileContainer是从<TileContainer id="container" tiles="{/MovieCollection}"> <HBox> <StandardTile .../> </HBox> </TileContainer> 派生的控件。

UI5 TileContainer aggregation

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

  

未捕获的错误：“ Element sap.m.HBox #__ hbox1”不适用于Element sap.m.TileContainer #__ xmlview1--container的聚合“ tiles”

请从列表绑定模板中删除sap.m.Tile：

<HBox>

TileContainer仅包含一个图块

有一个bug in the framework不允许<TileContainer id="container" tiles="{/MovieCollection}"> <StandardTile .../> </TileContainer> 仅显示一个Tile来显示任何内容。该修补程序应从UI5版本1.48开始可用。

相关问题
最新问题