如何在openui5中使用js视图编码sap.m.sample.ListGrouping

Question

嗨，我需要通过使用js view.but的列表分组控制，但openui5通过使用xml视图提供代码。 https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.ListGrouping/preview 如何将此代码转换成JS视图，以及如何使ListGrouping能够选择两个级和组级和更改此为下拉框

List.view.xml

<mvc:View 
    controllerName="sap.m.sample.ListGrouping.List" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m"> 
    <List 
     items="{ 
      path: '/ProductCollection', 
      sorter: { 
       path: 'SupplierName', 
       descending: false, 
       group: true 
      }, 
      groupHeaderFactory: '.getGroupHeader' 
     }" 
     headerText="Products" > 
     <StandardListItem 
      title="{Name}" 
      description="{ProductId}" 
      icon="{ProductPicUrl}" 
      iconDensityAware="false" 
      iconInset="false" /> 
    </List> 
</mvc:View> 

名单。 controller.js

sap.ui.define([ 
     'jquery.sap.global', 
     'sap/m/GroupHeaderListItem', 
     'sap/ui/core/mvc/Controller', 
     'sap/ui/model/json/JSONModel' 
    ], function(jQuery, GroupHeaderListItem, Controller, JSONModel) { 
    "use strict"; 

    var ListController = Controller.extend("sap.m.sample.ListGrouping.List", { 

     onInit : function (evt) { 
      // set explored app's demo model on this sample 
      var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json")); 
      this.getView().setModel(oModel); 
     }, 

     getGroupHeader: function (oGroup){ 
      return new GroupHeaderListItem({ 
       title: oGroup.key, 
       upperCase: false 
      }); 
     } 
    }); 


    return ListController; 

}); 

如何使用JS视图 我试图像如下写相同的代码，但我得到错误：缺少模板或工厂功能的元素s.m.List #__ list0的ggregation项目！ List.view.js

sap.ui.jsview("oui5mvc.List", { 
    getControllerName : function() { 
     return "oui5mvc.List"; 
    }, 
    createContent : function(oController) { 
     odbbshiftGlobalId = this.getId(); 
     var oMyFlexbox = new sap.m.FlexBox({ 
       items: [ 
         oList = new sap.m.List({ 
          width: '500px', 
          group: true, 
          groupHeaderFactory: '.getGroupHeader', 
          items: [ 

          ] 
          }), 
      ] 
      }); 
     oMyFlexbox.placeAt(this.getId()).addStyleClass("tes"); 
    } 

}); 

List.controller.js

sap.ui.controller("oui5mvc.List", { 

    onInit: function() { 
      var data = { 
        "ProductCollection": [ 
             { 
              "ProductId": "1239102", 
              "Name": "Power Projector 4713", 
              "Category": "Projector", 
              "SupplierName": "Titanium", 
              "Description": "A very powerful projector with special features for Internet usability, USB", 
              "WeightMeasure": 1467, 
              "WeightUnit": "g", 
              "Price": 856.49, 
              "CurrencyCode": "EUR", 
              "Status": "Available", 
              "Quantity": 3, 
              "UoM": "PC", 
              "Width": 51, 
              "Depth": 42, 
              "Height": 18, 
              "DimUnit": "cm", 
              "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-6100.jpg" 
             }, 
             { 
              "ProductId": "2212-121-828", 
              "Name": "Gladiator MX", 
              "Category": "Graphics Card", 
              "SupplierName": "Technocom", 
              "Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV", 
              "WeightMeasure": 321, 
              "WeightUnit": "g", 
              "Price": 81.7, 
              "CurrencyCode": "EUR", 
              "Status": "Discontinued", 
              "Quantity": 10, 
              "UoM": "PC", 
              "Width": 34, 
              "Depth": 14, 
              "Height": 2, 
              "DimUnit": "cm", 
              "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1071.jpg" 
             }, 
             { 
              "ProductId": "K47322.1", 
              "Name": "Hurricane GX", 
              "Category": "Graphics Card", 
              "SupplierName": "Red Point Stores", 
              "Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV", 
              "WeightMeasure": 588, 
              "WeightUnit": "g", 
              "Price": 219, 
              "CurrencyCode": "EUR", 
              "Status": "Out of Stock", 
              "Quantity": 25, 
              "UoM": "PC", 
              "Width": 34, 
              "Depth": 14, 
              "Height": 2, 
              "DimUnit": "cm", 
              "ProductPicUrl": "https://openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/img/HT-1072.jpg" 
             }, 

            ], 
            "ProductCollectionStats": { 
             "Counts": { 
              "Total": 14, 
              "Weight": { 
               "Ok": 7, 
               "Heavy": 5, 
               "Overweight": 2 
              } 
             }, 
             "Groups": { 
              "Category": { 
               "Projector": 1, 
               "Graphics Card": 2, 
               "Accessory": 4, 
               "Printer": 2, 
               "Monitor": 3, 
               "Laptop": 1, 
               "Keyboard": 1 
              }, 
              "SupplierName": { 
               "Titanium": 3, 
               "Technocom": 3, 
               "Red Point Stores": 5, 
               "Very Best Screens": 3 
              } 
             }, 
             "Filters": [ 
              { 
               "type": "Category", 
               "values": [ 
                { 
                 "text": "Projector", 
                 "data": 1 
                }, 
                { 
                 "text": "Graphics Card", 
                 "data": 2 
                }, 
                { 
                 "text": "Accessory", 
                 "data": 4 
                }, 
                { 
                 "text": "Printer", 
                 "data": 2 
                }, 
                { 
                 "text": "Monitor", 
                 "data": 3 
                }, 
                { 
                 "text": "Laptop", 
                 "data": 1 
                }, 
                { 
                 "text": "Keyboard", 
                 "data": 1 
                } 
               ] 
              }, 
              { 
               "type": "SupplierName", 
               "values": [ 
                { 
                 "text": "Titanium", 
                 "data": 3 
                }, 
                { 
                 "text": "Technocom", 
                 "data": 3 
                }, 
                { 
                 "text": "Red Point Stores", 
                 "data": 5 
                }, 
                { 
                 "text": "Very Best Screens", 
                 "data": 3 
                } 
               ] 
              } 
             ] 
            } 
            }; 



       var oTemplate11 = new sap.m.StandardListItem({title : "{Name}"}); 
       oList.setModel(new sap.ui.model.json.JSONModel(data)); 
       oList.bindItems("/ProductCollection"); 
       oList.placeAt('content'); 

    }, 
    getGroupHeader: function (oGroup){ 
     return new sap.m.GroupHeaderListItem({ 
      title: oGroup.key, 
      upperCase: false 
     }); 
    }, 

}); 

Answer 1

您的通话将项目绑定到列表是不完全正确。
该方法将带有绑定信息的对象作为参数，而不仅仅是模型属性的路径。一般参见bindItems和bindAggregation的文档。

在你的情况下，它应该像

oList.bindItems({ 
    path: "/ProductCollection", 
    template: new sap.m.StandardListItem({ 
    title: "{Name}", 
    description: "{ProductId}", 
    icon: "{ProductPicUrl}" 
    }) 
});