简体   繁体   English

如何将XML视图传输到JavaScript视图/ SAPUI5

[英]How to transfer XML view to JavaScript view / SAPUI5

Im trying to trasnform xml BlockLayout structured code to js. 我试图将xml BlockLayout结构化代码转换为js。 But it doesnt work properly, because it doesnt show any content on view. 但是它不能正常工作,因为它不会在视图上显示任何内容。 I checked the aggregations and I see there is cell aggregation for Row and sap.ui.Control aggregation for cell. 我检查了聚合,然后看到存在Row和sap.ui.Control的单元聚合。

JavaScript: JavaScript的:

        var oLayout = new sap.ui.layout.VerticalLayout("Layout", {
            content: [
                new sap.ui.layout.BlockLayout("Block", {
                    content: [
                        new sap.ui.layout.BlockLayoutRow("Row", {
                            content: [
                                new sap.ui.layout.BlockLayoutCell("Cell1", {
                                    content: [
                                        new sap.m.Text("sample", {text: "test"})
                                    ]
                                })
                            ]
                        })
                    ]
                })
            ]
        });

        var viewID = this.getView().sId;
        viewID = viewID + "--detailPage-cont";
        oLayout.placeAt(viewID);

When I check debugger if some content were added I see added content without cells and text. 当我检查调试器是否添加了某些内容时,我看到添加的内容没有单元格和文本。

在此处输入图片说明

hope this can help https://jsbin.com/benogay/edit?html,js,output 希望这可以帮助https://jsbin.com/benogay/edit?html,js,输出

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.ui.table" data-sap-ui-theme="sap_bluecrystal">
  </script>
  <script>
    sap.ui.define([
      'sap/ui/core/mvc/Controller',
      'sap/ui/layout/VerticalLayout',
      'sap/ui/layout/BlockLayout',
      'sap/ui/layout/BlockLayoutRow',
      'sap/ui/layout/BlockLayoutCell',
      'sap/m/Text'
    ], function(Controller, VerticalLayout, BlockLayout, BlockLayoutRow, BlockLayoutCell, Text) {
      sap.ui.jsview("myView.Template", {
        getControllerName: function() {
          return "myView.Template";
        },
        createContent: function(oController) {
          return new VerticalLayout({
            content: new BlockLayout({
              content: new BlockLayoutRow({
                content: new BlockLayoutCell({
                  content: new Text({
                    text: "test"
                  })
                })
              })
            })
          });
        }
      });

      Controller.extend("myView.Template", {
        onInit: function(oEvent) {
        },
      });
    });


    var view = sap.ui.view({
      type: sap.ui.core.mvc.ViewType.JS,
      viewName: "myView.Template"
    });
    view.placeAt("content");
  </script>
</head>

<body class="sapUiBody sapUiSizeCompact" role="application">
  <div id="content"></div>
</body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM