UI5 i18n 支持静态模型数据

Question

我正在探索 sap.f.ProductSwitch controller on a sample project sap.f.sample.ShellBarProductSwitch。

除一件事外一切都很清楚，如果我想为产品列表 (model/data.json) 提供 i18n 支持，应该采用什么方法？

例如除了硬编码的英文产品列表：

{
    "items": [
        {
            "src": "sap-icon://home",
            "title": "Home"
        }
    ]
}

我想提供一个法文：

{
    "items": [
        {
            "src": "sap-icon://home",
            "title": "Maison"
        }
    ]
}

通过基本对话，我可以依赖内置的 i18n UI5 引擎，但在这里我不知道如何在 XML 模板中启用 i18n :

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

Answer 1

自制解决方案。

XML-模板：

<f:ProductSwitchItem
    src = "{src}"
    title = "{titleI18NKey}" />

控制器：

const resourceBundle = this.getView().getModel("i18n").getResourceBundle();

const productSwitcherModelData = this.getView().getModel("productSwitcher")?.getData();

productSwitcherModelData.items.forEach((item) => {

    item.titleI18NKey = resourceBundle.getText(item.titleI18NKey);

});

this.productSwitcher.setModel(this.getView().getModel("productSwitcher"));

在产品切换器模型而不是真实文本中，我存储了一个键值对：

titleI18NKey: i18n_dialogue_key

稍后被 i18n 模型的结束文本替换并设置为 productSwitcher 模型。

P.S。如果有更优雅的基于UI5功能的实现，请告诉我。

Answer 2

如果您只有静态值，我宁愿不使用列表绑定，而是单独创建产品切换项：

<ProductSwitch change="fnChange" >
   <items>                                              
      <ProductSwitchItem src="sap-icon://retail-store" title="{i18n>Title_1}" />
      <ProductSwitchItem src="sap-icon://family-care" title="{i18n>Title_2}" />
   </items>
</ProductSwitch >

这样您就可以像往常一样使用标题的资源模型，不需要任何其他代码。

Answer 3

如果您更喜欢数据绑定方法，可以使用带有标题属性绑定的格式化程序从资源模型中检索文本。

必须在您的 data.json 中为每个项目定义资源包文本的密钥：

JSON数据模型：

{
    "items": [
        {
            "src": "sap-icon://home",
            "titleI18NKey": "myResourceBundleKeyToThisItem"
        }
    ]
}

XML-template:

<ProductSwitch
    change = "onClickProductSwitcherItem"
    items = "{
        path: '/items'
    }">

    <items>

        <ProductSwitchItem
            src = "{src}"
            title = "{
                path: 'titleI18NKey',
                formatter: '.getText'
        }" />

    </items>

</ProductSwitch>

格式化程序 getText 需要在您的控制器中定义：

getText(i18nKey) {

    const dialogue = this.getView().getModel("i18n").getProperty(i18nKey);

    return dialogue;

}

UI5 i18n 支持静态模型数据

UI5 i18n support for the static model data

sapui5