如何使用 UI5 中的 IconPool select 对话框中的图标

Question

您好，我需要帮助将 UI5 的 IconPool 集成到带有 ValueHelp 的 SelectDialog 中。您应该能够 select 所有图标。

我的代码： 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()

Answer 1

您正在视图中使用 "named model" (myModel) 进行字段绑定：{myModel>Icon}。但是您在 Component.js 中使用默认模型：oDialog.setModel(oModel)

使用此语法应将您的模型设置为您在 XML 视图中使用的命名模型：

oDialog.setModel(oModel, "myModel")

您还需要在项目路径中引用命名模型。

items="{ path : 'myModel>/icons'}"

或者只需从 {myModel>Icon} 和 {myModel>IconText} 中删除 myModel> - 只要您没有其他默认模型。

<StandardListItem
            id="iconInputHelpId"
            icon="{Icon}"
            title="{IconText}"/>

Answer 2

您的代码中存在一些误解。

命名模型

您在绑定 StandardListItem 时使用了模型名称。

<StandardListItem
    id="iconInputHelpId"
    icon="{myModel>Icon}"
    title="{myModel>IconText}"/>

但是，您在绑定项目聚合以及首先将模型设置到视图时没有使用该名称。

items="{
    path : '/icons'
}">

oDialog.setModel(oModel)

正如@Bernard 所说，您可以完全删除名称或始终使用它。

绑定路径

IconPool.getIconNames() returns 一个简单的字符串列表。所以您的模型结构将如下所示：

{
    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="{}"/>

使用空路径（这是一个相对路径，因为它不以 / 开头）将按原样获取项目。在大多数情况下，这并不好，因为项目是具有属性的对象。在你的情况下，一个项目是一个字符串，所以这是完美的。

这样就不需要工厂了！

工作示例：

https://plnkr.co/edit/WY7mgge7RKHOfrRh

如何使用 UI5 中的 IconPool select 对话框中的图标

How to select Icons in Dialog with IconPool from UI5

javascript

icons

select

dialog

sapui5

命名模型

绑定路径