无法访问带有View byId的控制器中的JSView中创建的控件

Question

我正在尝试显示VizFrame，并且我的数据采用简单的JSON格式。我的视图和控制器都在JS中。 （我将开始用XML编写视图），因为我认为这是要走的路。

我得到一个空白页，错误为：“ setDataset of undefined”。我想念什么？

我的查看代码是这个。

createContent: function(oController) {
  var oSubHeader = new sap.m.Bar({
    contentLeft: [
      new sap.m.Button({
        icon: "sap-icon://nav-back",
        press: [oController.onNavBack, oController]
      })
    ],
    contentMiddle: [
      new sap.m.Label({
        text: "{i18n>app_subhead_2}"
      })
    ]
  });
  var oVizFrame = new sap.viz.ui5.controls.VizFrame("VizFrameId", {
    width: "100%",
    height: "400px",
    vizType: "line"
  });
  var oPage = new sap.m.Page({
    title: "UI5 Assignment App",
    showSubHeader: true,
    subHeader: oSubHeader,
    content: [oVizFrame]
  });
  return oPage;
}

我对应的控制器是

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/core/UIComponent",
  "sap/ui/core/routing/History",
  "sap/viz/ui5/controls/VizFrame",
  "sap/viz/ui5/data/FlattenedDataset"
], function (Controller, UIComponent, History, VizFrame, FlattenedDataset) {
  "use strict";

  return Controller.extend("Project_Tile_learning.Divya_tile_Project.controller.ProductDetailPage", {
    onNavBack: function () {
      var oHistory = History.getInstance();
      var sPreviousHash = oHistory.getPreviousHash();
      if (sPreviousHash !== undefined) {
        window.history.go(-1);
      } else {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("homepage", true);
      }
    },
    onInit: function () {
      var sampleDatajson = new sap.ui.model.json.JSONModel("json/PA.json");
      var oVizFrame = this.getView().byId("VizFrameId");
      var oDataset = new sap.viz.ui5.data.FlattenedDataset({
        dimensions: [{
          name: "Year",
          value: "{Year}"
        }],
        measures: [{
          name: "Supplier",
          value: "{Supplier}"
        }, {
          name: "Liquor",
          value: "{Liquor}"
        }, {
          name: "Quantity",
          value: "{Quantity}"
        }],
        data: {
          path: "/items"
        }
      });
      oVizFrame.setDataset(oDataset);
      oVizFrame.setModel(sampleDatajson);
      var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
        "uid": "valueAxis",
        "type": "Measure",
        "values": ["Supplier"]
      });
      var oFeedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
        "uid": "valueAxis",
        "type": "Measure",
        "values": ["Liquor"]
      });
      var oFeedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
        "uid": "valueAxis",
        "type": "Measure",
        "values": ["Quantity"]
      });
      var oFeedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
        "uid": "categoryAxis",
        "type": "Dimension",
        "values": ["Year"]
      });
      oVizFrame.addFeed(oFeedValueAxis);
      oVizFrame.addFeed(oFeedValueAxis1);
      oVizFrame.addFeed(oFeedValueAxis2);
      oVizFrame.addFeed(oFeedCategoryAxis);
    }
  });
});

Answer 1

在JS视图定义中创建控件时，请始终使用this.createId("myControl")。

From the doc:

如果您想为JSView内的控件定义ID以确保其唯一性[...]，则无法提供硬编码ID，但必须给视图提供添加其实例ID的机会，例如前缀。这是通过使用View.createId(...)方法完成的。

对于上面的示例，此操作如下：

new sap.viz.ui5.controls.VizFrame(this.createId("VizFrameId"), { /*...*/ });

然后在控制器中，myView.byId尝试使用视图自己的ID作为前缀访问该控件，这一次将成功，因为该控件具有一个以视图ID作为前缀的ID。