UI5将模型属性传递给addStyleClass

时间:2015-07-07 08:03:53

标签: sapui5

我想使用以下代码将列表绑定到模型,并且无法将参数传递到addStyleClass函数以动态地应用CSS类。

这是我的编码:

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类数量为{Quantity}而不是quantity0或quantity1。

函数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;
}

如何为每个项目传递Quantity参数?

1 个答案:

答案 0 :(得分:1)

使用工厂功能代替模板

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

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

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