你好,我需要帮助将UI5的IconPool集成到一个带有ValueHelp的SelectDialog中。你应该能够选择所有的图标。
我的代码。Home.controller.js
handleValueHelp: function() {
var loadDialog = this.loadFragment("myValueHelpFragment", this)
loadDialog.then(function(oSelectHelpDialog){
this.getView().addDependent(this.oSelectHelpDialog);
var oBinding = oSelectHelpDialog.getBinding("items");
oBinding.filter([]);
oSelectHelpDialog.open();
}.bind(this));
},
ValueHelp.fragment.view
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<SelectDialog
noDataText="No Icons Found"
title="Select Icon"
search="handleSearch"
liveChange="handleSearch"
confirm="handleValueHelpClose"
cancel="handleValueHelpClose"
items="{
path : '/icons'
}">
<StandardListItem
id="iconInputHelpId"
icon="{myModel>Icon}"
title="{myModel>IconText}"/>
</SelectDialog>
</core:FragmentDefinition>
Component.js
var oModel = new sap.ui.model.json.JSONModel({
icons: sap.ui.core.IconPool.getIconNames()
});
var oDialog = new sap.m.SelectDialog();
oDialog.setModel(oModel)
oModel.bindAggregation("items", {
path: "/icons",
factory: function(sId, oItem){
return new sap.m.StandardListItem({
key: oItem.getObject(),
title: oItem.getObject()
})
}
});
oDialog.open()
你的代码中存在一些误解。
您在绑定StandardListItem时为您的模型使用了一个名称。
<StandardListItem
id="iconInputHelpId"
icon="{myModel>Icon}"
title="{myModel>IconText}"/>
然而,您在绑定 items 聚合时,以及一开始将模型设置为视图时,并没有使用该名称。
items="{
path : '/icons'
}">
oDialog.setModel(oModel)
正如 @Bernard 所说,你可以完全放弃这个名字,或者持续使用它。
IconPool.getIconNames()
返回一个扁平的字符串列表。所以你的模型结构会是这样的。
{
icons: [
"accidental-leave",
"account",
"wrench",
"windows-doors",
"washing-machine",
...
]
}
使用你当前的绑定(假设模型名称的问题将被修复) UI5试图从你的JSONModel中加载以下内容。
"/icons/0/Icon"
"/icons/0/IconText"
但是您的图标数组中的项目没有属性。Icon
或 IconText
. 它们只是字符串!
现在你必须从scrath建立图标路径。这可以直接在XML中完成。
<StandardListItem
icon="sap-icon://{}"
title="{}"/>
使用一个空的路径(这是一个相对路径,因为它不以 /
)将按项目的原样取用。在大多数情况下,这样做并不好,因为一个项目是一个有属性的对象。在你的例子中,一个项目是一个字符串,所以这很完美。
这样你就不需要工厂了。
工作实例。
你在视图中使用 "命名模型"(myModel)进行字段绑定。{myModel>Icon}
.但你在你的Component.js中使用了默认模型。oDialog.setModel(oModel)
使用这种语法应该将你的模型设置为你在XML视图中使用的命名模型。
oDialog.setModel(oModel, "myModel")
你还需要在你的项目路径中引用命名的模型。
items="{ path : 'myModel>/icons'}"
或者简单地删除 myModel>
从 {myModel>Icon}
和 {myModel>IconText}
- 只要你没有其他默认模式。
<StandardListItem
id="iconInputHelpId"
icon="{Icon}"
title="{IconText}"/>