UI5:使用不同的图标从JSON动态构建ListItems [英] UI5: Dynamically build ListItems from JSON with different Icons
问题描述
我有这个简单的XML视图:
I have this simple XML View:
<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。首先设置一些数据:
In my controller, I call a method to build list items onInit. First of all set some data:
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");
然后我构建列表并绑定项目:
Then I build the list and bind the items to it:
// 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}"
})
});
在我构建列表并进行渲染后,我会查看哪些项目有额外的价格和设置他们的图标:
After I built the list and is alread rendered, I look after which items have an extra price and set an icon for them:
jQuery.each(list.getItems(), function(i, obj) {
if(obj.mProperties.price == "extra") {
obj.setIcon("sap-icon://flag");
}
});
所以。一切都很好但我对我的解决方案感到不满意,因为我宁愿在渲染列表之前操纵数据。我尝试在将项目绑定到列表之前直接构建列表模板,然后使用此模板,如下所示:
So. Everything works fine. But I am not happy with my solution, because I'd rather like to manipulate the data BEFORE rendering the list. I tried to build a list template directly before binding the items to the list and then use this template like:
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;
});
但是,我的列表没有显示,我在控制台中出现错误,说
But then my list is not shown and I got an error in the console, saying
缺少Element sap.m.List ...的聚合项目的模板或工厂函数...
Missing template or factory function for aggregation items of Element sap.m.List ...
$ b有没有人有一个想法如何改进我的sol。
THX很多..
Does anyone have an idea how to improve my sol.? THX a lot..
推荐答案
IMHO,我想你可以让控制器尽可能干净,并定义XMLView中所需的大部分功能(绑定,模板,排序和图标):
IMHO, I think you can have the controller as clean as possible, and define most of the needed functionality (binding, template, sorter, and icon) in the 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
:
You then can rid of all the template binding and manipulation stuff you have in your controller, and you only need to specify the formatter function 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!