UI5：使用不同的图标从 JSON 动态构建 ListItems

Question

我有这个简单的XML视图：

<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>

在我的控制器中，我调用了一个方法来构建列表项 onInit。首先设置一些数据：

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");

然后我构建列表并将项目绑定到它：

// 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}"
                })
            });

在我构建列表并已呈现后，我会查看哪些项目有额外价格并为它们设置图标：

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

所以。一切正常。但我对我的解决方案不满意，因为我更愿意在呈现列表之前操作数据。我试图在将项目绑定到列表之前直接构建一个列表模板，然后像这样使用这个模板：

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;
        });

但是后来我的列表没有显示，我在控制台中收到一个错误，说

Missing template or factory function for aggregation items of Element sap.m.List ...

有谁知道如何改进我的解决方案？非常感谢..

Answer 1

将价格值绑定到格式化程序函数。所以你可以从值

动态创建图标

list.bindItems({
    path : "/products", 
    sorter : new sap.ui.model.Sorter("prodName"),
    template : new sap.m.StandardListItem({
        title: "{prodName}",
        description: "{prodCountry}",
        /* bind items to factory-function */
        icon: {
            path: "price",
            formatter: function(price) {
                if (price == "extra") {
                    return "sap-icon://flag"; 
                }
            }
        }
    })
});

ps：我没有测试这个，但它应该像这样工作。如果您收到错误，请发表评论。

Answer 2

恕我直言，我认为您可以让控制器尽可能简洁，并在 XMLView 中定义大部分需要的功能（绑定、模板、排序器和图标）：

<List id="test-list" items="{
    path   : '/products', 
    sorter : [{
        path       : 'prodName', 
        descending : true
    }]
}">
    <StandardListItem title="{prodName}" 
                      description="{prodCountry}" 
                      icon="{path:'price', formatter:'.getIconFlag'}" />
</List>

然后你可以摆脱所有你控制器中的模板绑定和操作，你只需要指定格式化函数getIconFlag:

getIconFlag : function (sPrice) {
    return sPrice === "extra" ? "sap-icon://flag" : null;
}

请参阅以下工作示例：

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            "products": [
                {
                    "prodName": "Apple",
                    "prodCountry": "Netherlands",
                    "price": "normal"
                },
                {
                    "prodName": "Orange",
                    "prodCountry": "Spain",
                    "price": "extra"
                },
                {
                    "prodName": "Strawberry",
                    "prodCountry": "Poland",
                    "price": "normal"
                }
            ]
        });

        this.getView().setModel(oModel);

    },

    getIconFlag : function (sPrice) {
        return sPrice === "extra" ? "sap-icon://flag" : null;
    }

});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <List id="test-list" items="{
            path: '/products', 
            sorter: [{
                path: 'prodName', 
                descending: true
            }]
        }">
            <StandardListItem title="{prodName}" description="{prodCountry}" icon="{path:'price', formatter:'.getIconFlag'}" />
        </List>
    </mvc:View>
</script>

UI5：使用不同的图标从 JSON 动态构建 ListItems

UI5: Dynamically build ListItems from JSON with different Icons

json

data-binding

listitem

sapui5