UI5: ListItems von JSON dynamisch mit verschiedenen Symbolen erstellen

Ich habe diese einfache XML-Ansicht:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
        controllerName="listicons.list" xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Title">
        <content>
            <List id="test-list"></List>
        </content>
    </Page>
</core:View>

In meinem Controller rufe ich eine Methode zum Erstellen von Listenelementen inInit auf. Stellen Sie zunächst einige Daten ein:

var data = {
        "products": [
              {
                  "prodName": "Apple",
                  "prodCountry": "Netherlands",
                  "price": "normal"
              },
              {
                  "prodName": "Orange",
                  "prodCountry": "Spain",
                  "price": "extra"
              },
              {
                  "prodName": "Strawberry",
                  "prodCountry": "Poland",
                  "price": "normal"
              }
          ]
        };
// create a Model with this data and attach it to the view
            var model = new sap.ui.model.json.JSONModel();
            model.setData(data);
            this.getView().setModel(model);
            var list = this.getView().byId("test-list");

Dann erstelle ich die Liste und binde die Gegenstände daran:

// bind the List items to the data collection
            list.bindItems({
                path : "/products", 
                sorter : new sap.ui.model.Sorter("prodName"),
                //template : listTmpl
                template : new sap.m.StandardListItem({
                    title: "{prodName}",
                    description: "{prodCountry}"
                })
            }); 

Nachdem ich die Liste erstellt und bereits gerendert habe, achte ich darauf, welche Artikel einen zusätzlichen Preis haben und setze ein Symbol für sie:

jQuery.each(list.getItems(), function(i, obj) {
                if(obj.mProperties.price == "extra") {
                    obj.setIcon("sap-icon://flag"); 
                }
            });

So. Alles funktioniert gut. Aber ich bin mit meiner Lösung nicht zufrieden, weil ich die Daten lieber manipulieren möchte, BEVOR ich die Liste rendere. Ich habe versucht, eine Listenvorlage direkt vor dem Binden der Elemente an die Liste zu erstellen und diese Vorlage dann wie folgt zu verwenden:

var listTmpl = jQuery.each(data.products, function(i, a) {
            var lI = new sap.m.StandardListItem({
                title: "{prodName}",
                description: "{prodCountry}" 
            });
            if(a.price == "extra") {
                lI.setIcon("sap-icon://flag");
            }
            return lI;
        });

Aber dann wird meine Liste nicht angezeigt und ich habe einen Fehler in der Konsole mit den Worten

Fehlende Vorlage oder Factory-Funktion für Aggregationselemente des Elements sap.m.List ...

Hat jemand eine Idee, wie ich mein Sol verbessern kann? Vielen Dank.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage