通过单击图块导航到首页的不同视图

Question

我有一个包含两个图块的首页，该图可以正常工作。单击第一个图块时，我的控件应导航到“ SearchProductPage”。

我有以下文件：

• homepage.view.js
• homepage.controller.js
• SearchProductPage.view.js
• SearchProductPage.controller.js

因此，当我单击磁贴时，会收到每个代码的警报消息。但是我的代码无法导航到SearchProductPage.view.js。

视图

homepage.view.js

sap.ui.jsview("view.homepage", {
  getControllerName: function() {
    return "Webapp.controller.homepage";
  },

  createContent: function(oController) {
    var oTileSearchProd = new sap.m.StandardTile({
      title: "{i18n>tile_title_1}",
      press: [oController.goToProductSearch, oController]
    });
    var oTileTopRatedProd = new sap.m.StandardTile({
      title: "{i18n>tile_title_2}",
      press: [oController.goToProductAnalytics, oController]
    });
    var oTileCont = new sap.m.TileContainer({
      tiles: [oTileSearchProd, oTileTopRatedProd]
    });
    var oPage = new sap.m.Page({
      title: "{i18n>app_head}",
      enableScrolling: false,
      content: [oTileCont]
    });
    return oPage;
  }
});

控制器

homepage.controller.js

sap.ui.controller("Webapp.controller.homepage", {
  onInit: function() {
    var i18nPath = "i18n/i18n.properties";
    var oi18nModel = new sap.ui.model.resource.ResourceModel({
      bundleUrl: i18nPath
    });
    sap.ui.getCore().setModel(oi18nModel, "i18n");
  },

  goToProductSearch: function(oEvt) {
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.navTo("idSearchProductPage");
  },

  goToProductAnalytics: function(oEvt) {
    var app = sap.ui.getCore().byId("idProductsAnalyticsPage");
    var oResourceBundle = app.getModel("i18n").getResourceBundle();
    var url = oResourceBundle.getText("LOGIN").toString().trim();
    sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(url), "barChart");
    var that = this;
    that.getOwnerComponent().getRouter().navTo("idProductsAnalyticsPage");
  }
});

路由

"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "JS",
    "viewPath": "sap.ui.Webapp.view",
    "controlId": "app",
    "controlAggregation": "pages",
    "transition": "slide"
  },
  "routes": [
    {
      "pattern": "",
      "name": "homepage",
      "target": "homepage"
    },
    {
      "pattern": "SearchProductPage",
      "name": "SearchProductPage",
      "target": "SearchProductPage"
    },
    {
      "pattern": "ProductDetailPage",
      "name": "ProductDetailPage",
      "target": "ProductDetailPage"
    },
    {
      "pattern": "ProductAnalyticsPage",
      "name": "ProductAnalyticsPage",
      "target": "ProductAnalyticsPage"
    },
    {
      "pattern": "SearchProductPage",
      "name": "SearchProductPage",
      "target": "SearchProductPage"
    }
  ],
  "targets": {
    "homepage": {
      "viewName": "homepage"
    },
    "SearchProductPage": {
      "viewName": "SearchProductPage"
    },
    "ProductDetailPage": {
      "viewName": "ProductDetailPage"
    },
    "ProductAnalyticsPage": {
      "viewName": "ProductAnalyticsPage"
    }
  }
}

这是我的项目。一切都在JavaScript中：

---

我的UI5版本是1.63.1。

Answer 1

也许您应该先看一下文档

https://sapui5.hana.ondemand.com/1.36.6/docs/guide/e5200ee755f344c8aef8efcbab3308fb.html

视图：

 createContent : function(oController) {
        var oTileSearchProd = new sap.m.StandardTile({
        title: "{i18n>tile_title_1}",
        press : [ oController.goToProductSearch, oController]
        }); 
        return new sap.m.Page({
            title: "Title Page 2",
            content: [
                oTileSearchProd 
            ]
        });
    }

和控制器：

goToProductSearch: function()  {
        var router;
        router = sap.ui.core.UIComponent.getRouterFor(this);
        return router.navTo("SearchProductPage", null);
    }

我也将更改路由配置。例如，在清单中尝试为您构建它

   "routing": {
    "config": {
        "viewType": "JS",
        "viewPath": "sapui5.app53.view",
        "targetControl":"idPageContainer",
        "targetAggregation": "pages",
        "routerClass": "sap.m.routing.Router"
    },
    "routes": [{
        "pattern": "",
        "name": "First",
        "view": "zjs_view_53_02",
        "targetAggregation": "pages"
    }, {
        "pattern": "second",
        "name": "Second",
        "view": "zjs_view_53_03",
        "targetAggregation": "pages"
    }]
}

Answer 2

这是我的项目。一切都在javascript

Answer 3

sap.ui.controller（“ Webapp.controller.homepage”，{

onInit: function () {

    var i18nPath = "i18n/i18n.properties";

    var oi18nModel = new sap.ui.model.resource.ResourceModel({
        bundleUrl: i18nPath

    });
    sap.ui.getCore().setModel(oi18nModel, "i18n");

},

goToProductSearch: function (oEvt) {

    alert("Before"); // eslint-disable-line no-alert

    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.navTo("idSearchProductPage");
    alert("after"); // eslint-disable-line no-alert
},

goToProductAnalytics: function (oEvt) {

    var app = sap.ui.getCore().byId("idProductsAnalyticsPage");
    var oResourceBundle = app.getModel("i18n").getResourceBundle();
    var url = oResourceBundle.getText("LOGIN").toString().trim();
    sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(url), "barChart");

    var that = this;
    that.getOwnerComponent().getRouter().navTo("idProductsAnalyticsPage");

    alert("after"); // eslint-disable-line no-alert
}

}）;

Answer 4

这是我的观点sap.ui.jsview（“ view.homepage”，{

getControllerName: function () {
    return "Webapp.controller.homepage";
},

createContent: function (oController) {

    var oTileSearchProd = new sap.m.StandardTile({

        title: "{i18n>tile_title_1}",
        press: [oController.goToProductSearch, oController]

    });
    var oTileTopRatedProd = new sap.m.StandardTile({

        title: "{i18n>tile_title_2}",
        press: [oController.goToProductAnalytics, oController]

    });

    var oTileCont = new sap.m.TileContainer({
        tiles: [oTileSearchProd, oTileTopRatedProd]

    });
    var oPage = new sap.m.Page({
        title: "{i18n>app_head}",
        enableScrolling: false,
        content: [oTileCont]
    });

    return oPage;
}

}）;

Answer 5

也许您应该先看一下文档

https://sapui5.hana.ondemand.com/1.36.6/docs/guide/e5200ee755f344c8aef8efcbab3308fb.html

视图：

 createContent : function(oController) {
        var oTileSearchProd = new sap.m.StandardTile({
        title: "{i18n>tile_title_1}",
        press : [ oController.goToProductSearch, oController]
        }); 
        return new sap.m.Page({
            title: "Title Page 2",
            content: [
                oTileSearchProd 
            ]
        });
    }

和控制器：

goToProductSearch: function()  {
        var router;
        router = sap.ui.core.UIComponent.getRouterFor(this);
        return router.navTo("SearchProductPage", null);
    }

我也将更改路由配置。例如，在清单中尝试为您构建它

   "routing": {
    "config": {
        "viewType": "JS",
        "viewPath": "sapui5.app53.view",
        "targetControl":"idPageContainer",
        "targetAggregation": "pages",
        "routerClass": "sap.m.routing.Router"
    },
    "routes": [{
        "pattern": "",
        "name": "First",
        "view": "zjs_view_53_02",
        "targetAggregation": "pages"
    }, {
        "pattern": "second",
        "name": "Second",
        "view": "zjs_view_53_03",
        "targetAggregation": "pages"
    }]
}

Answer 6

@@ Boghyon Hoffmann，我的版本是1.63.1