如何为UI5 sap.f.ProductSwitch的静态模型数据配置i18n支持

实现方案 #

我们推荐采用键值映射+动态绑定的方案，不需要在数据文件里硬编码多语言文本，完全适配UI5原生i18n能力，具体步骤如下：

步骤1：调整静态数据结构

把model/data.json中原本存文本的title字段改为存i18n键名，避免硬编码语言内容：

{
    "items": [
        {
            "src": "sap-icon://home",
            "titleKey": "product.home"
        }
    ]
}

步骤2：补充i18n多语言条目

在对应语言的i18n资源文件中添加键值映射：

• 英文（i18n.properties）：product.home=Home
• 法语（i18n_fr.properties）：product.home=Maison
• 中文（i18n_zh.properties）：product.home=首页

步骤3：修改XML绑定逻辑

两种实现方式二选一即可：

• 方案A：直接用UI5表达式绑定（无需写额外JS代码，推荐）

<f:ProductSwitchItem
    src = "{src}"
    title = "{= ${i18n>/${titleKey}} }" />

• 方案B：用控制器自定义格式化函数（适配复杂的多语言拼接场景）
  首先在控制器中添加格式化方法：

formatProductTitle: function (sKey) {
    return this.getOwnerComponent().getModel("i18n").getResourceBundle().getText(sKey);
}

再修改XML绑定规则：

<f:ProductSwitchItem
    src = "{src}"
    title = "{ path: 'titleKey', formatter: '.formatProductTitle' }" />

补充说明 #

如果不想调整现有data.json的字段结构，也可以在数据模型加载完成后，遍历所有product条目，根据当前语言替换title字段的内容，但这种方案在用户手动切换应用语言时需要重新刷新数据模型，灵活性不如第一种方案。

内容的提问来源于stack exchange，提问作者Mike