UI5 将模型属性传递到 addStyleClass

Question

我想使用以下代码将列表绑定到模型，但无法将参数传递到 addStyleClass 函数以动态应用 CSS class.

这是我的编码：

var oList = new sap.m.List("list", {
    //headerText : "L+P",
    growing : true,
});
...

oList.bindItems({path: "/LP_ListSet",
            //filters : oFilter,
            //sorter: oSorter,
            template: new sap.m.CustomListItem({
                type: sap.m.ListType.Navigation,
            ...
                content: [
                    new sap.m.Text("descrip",{ text: "{Description}"}),
                    new sap.m.Text("mengelabel", {text: "Menge: "}),
                    new sap.m.Text("menge",{ text: "{Quantity}" }),
                    new sap.m.Text("einheitenlabel", {text: "Einheiten: "}),
                    new sap.m.Text("einheiten",{ text: "{UnitDescr}" }),
                    new sap.m.Text("preislabel", {text: "Preis: "}),
                    new sap.m.Text("preis",{ text: { path : 'Price',
                        formatter : function(value) {
                            return oController.currencyFormat(value);
                        }} }),

                    new sap.m.Text("gultigablabel", {text: "Gültig Ab: "}),
                    new sap.m.Text("gultigAb",{ 
                                text : { path : 'Priceva',
                                formatter : function(value) {
                                    return oController.dateFormat(value);
                                }} }), 

                    ]
                }
            ).addStyleClass(oController.getClassForQuantity((╯°□°）╯︵┻━┻)) //Here I'd like to pass the Quantity parameter

如果我像这样传递参数 .addStyleClass(oController.getClassForQuantity('{Quantity}') 我的结果 CSS class 是数量 {Quantity} 而不是数量 0 或数量 1。

函数getClassForQuantity定义为

getClassForQuantity: function(quantity) {
    console.log("quantity is: "+ quantity);
    return "quantity" + quantity; //should output quantity0, quantity1 etc. but outputs quantity{Quantity}
}

例子CSS是：

.quantity0 {
    border-left: 3px solid green;
}
.quantity1 {
    border-left: 3px solid blue;
}
.quantity2 {
    border-left: 3px solid red;
}

如何为每个项目传递数量参数？

Answer 1

使用工厂函数代替模板

function customListFactory(sId, oContext) {
  var quantity = oContext.getProperty("Quantity");

  return /*you template*/.addStyleClass("quantity" + quantity);
}

oList.bindItems({
  path: "/LP_ListSet",
  factory: customListFactory
}

UI5 将模型属性传递到 addStyleClass

UI5 pass model property into addStyleClass

sapui5

UI5 将模型 属性 传递到 addStyleClass

UI5 pass model property into addStyleClass

sapui5

UI5 将模型属性传递到 addStyleClass