javascript - 在sapui5中从XML View 手动转换为Javascript View

https://sapui5.hana.ondemand.com/#/controls上的文档提供了许多SAPUI5示例。但是所有视图都是用XML编写的。我可以在其他地方找到用Java脚本编写的示例，但是我要求一个适用于XML代码的通用规则。这是List.view.xml的示例，我需要手动将其转换为List.view.js

<mvc:View
height="100%"
controllerName="sap.m.sample.ListSelectionSearch.List"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
    showHeader="false" >
    <subHeader>
        <Toolbar>
            <SearchField
                liveChange="onSearch"
                width="100%" />
        </Toolbar>
    </subHeader>
    <content>
        <List
            id="idList"
            items="{/ProductCollection}"
            selectionChange="onSelectionChange"
            mode="MultiSelect"
            includeItemInSelection="true" >
            <infoToolbar>
                <Toolbar
                    visible="false"
                    id="idInfoToolbar" >
                    <Label id="idFilterLabel" />
                </Toolbar>
            </infoToolbar>
            <items>
                <StandardListItem
                    title="{Name}"
                    description="{ProductId}"
                    icon="{ProductPicUrl}"
                    iconDensityAware="false"
                    iconInset="false" />
            </items>
        </List>
    </content>
</Page>

任何帮助将不胜感激。

最佳答案

这与SAPUI5的JSView相同，在控制器中完成了列表聚合：

另外，请查看此完整的应用程序Example SAPUI5 JSView Application

要么

通过按CTRL + SHIFT + ALT + S和API参考来使用诊断工具

sap.ui.define(["sap/m/Page", "sap/m/List", "sap/m/Toolbar", "sap/m/SearchField", "sap/m/Label", "sap/m/Text"], function(Page, List, Toolbar, SearchField, Label, Text) {
  "use strict";
  return sap.ui.jsview("sap.m.sample.ListSelectionSearch.View", {
    getControllerName: function() {
      return "sap.m.sample.ListSelectionSearch.List";
    },
    createContent: function(oController) {
      var oToolbar = new Toolbar({
        visible: true,
        content: [
          new SearchField({
            liveChange: function() {
              oController.onSearch();
            },
            width: "100%"
          })
        ]
      });
      var oInfoToolbar = new Toolbar({
        content: new Toolbar(this.createId("idInfoToolbar"), {
          visible: true,
          content: new Text({
            text: "Label Text"
          })
        })
      });

      var oList = new List(this.createId("idList"), {
        mode: "MultiSelect",
        includeItemInSelection: true,
        infoToolbar: oInfoToolbar
      });

      var oPage = new Page(this.createId("oPageId"), {
        height: "100%",
        title: "Page Title",
        showHeader: true,
        showSubHeader: true,
        headerContent: oToolbar,
        content: [oList]
      });
      var app = new sap.m.App();
      app.addPage(oPage);
      app.placeAt("content");
      return app;
    }

  });
});

//in Controller
sap.ui.define(["sap/m/StandardListItem", "sap/ui/model/json/JSONModel"], function(StandardListItem, JSONModel) {
  "use strict";
  var oData = {

    "ProductCollection": [{
      "titleId": 0,
      "Name": "Olayinka Otuniyi",
      "ProductId": "001",
      "ProductPicUrl": "sap-icon://competitor"
    }, {
      "titleId": 1,
      "Name": "Maria Anders",
      "ProductId": "002",
      "ProductPicUrl": "sap-icon://badge"
    }, {
      "titleId": 2,
      "Name": "Ana Trujillo",
      "ProductId": "003",
      "ProductPicUrl": "sap-icon://broken-link"
    }, {
      "titleId": 3,
      "Name": "Thomas Hardy",
      "ProductId": "004",
      "ProductPicUrl": "sap-icon://create"
    }, {
      "titleId": 4,
      "Name": "Christina Berglund",
      "ProductId": "005",
      "ProductPicUrl": "sap-icon://pending"
    }, {
      "titleId": 5,
      "Name": "Hanna Moos",
      "ProductId": "006",
      "ProductPicUrl": "sap-icon://decision"
    }, {
      "titleId": 6,
      "Name": "Martín Sommer",
      "ProductId": "007",
      "ProductPicUrl": "sap-icon://process"
    }, {
      "titleId": 7,
      "Name": "Laurence Lebihans",
      "ProductId": "008",
      "ProductPicUrl": "sap-icon://accept"
    }, {
      "titleId": 8,
      "Name": "Elizabeth Lincoln",
      "ProductId": "009",
      "ProductPicUrl": "sap-icon://alert"
    }]

  };
  return sap.ui.controller("sap.m.sample.ListSelectionSearch.List", {

    //		onInit: function() {
    //		},
    onAfterRendering: function() {
      var oModel = new JSONModel(oData);
      this.getView().setModel(oModel, "products");

      var oTemplate = new StandardListItem({
        title: "{products>Name}",
        description: "{products>ProductId}",
        icon: "{products>ProductPicUrl}",
        iconDensityAware: false,
        iconInset: false,
        type: "Active"
      });
      oTemplate.attachPress(this.onSelectionChange, this);
      this.getView().byId("idList").bindItems({
        path: "/ProductCollection",
        template: oTemplate,
        model: "products"
      });
    },
    onSearch: function() {
      console.log("Searching");
    },
    onSelectionChange: function() {
      console.log("changing Selection");
    }
  });
});