wie man sap.m.sample.ListGrouping mit js view in openui5 kodiert

Question

hi ich brauche List Gruppierung Kontrolle mit Hilfe von js view.but openui5 bietet Code mit Hilfe von XML-Ansicht. https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.ListGrouping/preview wie dieser Code in js Ansicht umwandeln und wie sowohl Elementebene und Gruppenebene und ändern Sie diese als Drop-Down-Box

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> 

Liste ListGrouping Lage Auswahl zu treffen. 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; 

}); 

wie den gleichen Code schreiben unter Verwendung js Ansicht ich mag versucht haben, wie folgt, aber ich bin immer Fehler: Fehlende Vorlage oder Factory-Funktion für eine Sammlungselemente von Element sap.m.List #__ list0! 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

Ihr Anruf Elemente in die Liste zu binden, ist nicht ganz korrekt.
Die Methode verwendet ein Objekt mit Bindungsinformationen als Parameter und nicht nur den Pfad zur Modelleigenschaft. Siehe die Dokumentation für bindItems und bindAggregation im Allgemeinen.

In Ihrem Fall sollte es aussehen

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