如何使用JSON文件和XML视图设置本地化数据绑定? [英] How is localized data binding set up with JSON files and XML views?

问题描述

我有一个XMLView主页，其中包含一些图块.这些图块是从JSON文件填充的.磁贴具有标题"属性，需要i18​​n数据绑定.

I have an XMLView home page containing some tiles. These tiles are populated from a JSON file. The tiles have a 'title' attribute which requires i18n data binding.

XML视图的一部分:

Part of the XML view:

<TileContainer id="container" tiles="{/TileCollection}">
  <StandardTile
   icon="{icon}"
   title="{title}"
   press="onPress" />
</TileContainer>

JSON文件:

{
  "TileCollection" : [
      {
          "icon"   : "sap-icon://document-text",
          "title"  : "{i18n>foo}"
      }, 
      ... etc

我完成数据绑定的旧方法是直接在视图中使用 title ="{i18n> foo}" .当然，现在我基本上有两层数据绑定，一层在i18n的JSON中，一层在视图中以获取JSON(得到i18n).

The old way I accomplished data binding was directly in the view with title="{i18n>foo}". Of course now I have essentially two layers of data binding, one in the JSON for the i18n, and one in the view to get the JSON (which gets the i18n).

这也是我在Component.js上设置i18n模型的地方.

This is also my Component.js where I set up the i18n model.

sap.ui.core.UIComponent.extend("MYAPP.Component", {
  metadata: {
    rootView : "MYAPP.view.Home", //points to the default view

    config: {
      resourceBundle: "i18n/messageBundle.properties"
    },
    ... etc


  init: function(){
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    var mConfig = this.getMetadata().getConfig();

    var oRouter = this.getRouter();
    this.RouteHandler = new sap.m.routing.RouteMatchedHandler(oRouter);
    oRouter.register("router");
    oRouter.initialize();

    var sRootPath = jQuery.sap.getModulePath("MYAPP");
    var i18nModel = new sap.ui.model.resource.ResourceModel({
        bundleUrl : [sRootPath, mConfig.resourceBundle].join("/")
    });
    this.setModel(i18nModel, "i18n");
}

这个问题源于关于另一个问题的讨论，因此对于感兴趣的人可能会有更多信息.链接

This question arose from discussion about another question, so there may be more info there for anyone interested. Link

推荐答案

我通常采用的方法是使用格式化程序功能，其唯一目的是为某个键获取正确的本地化值(该值在资源模型中维护)，并由数据模型驱动)

The approach I usually take is using a formatter function, which sole purpose is to get the correct localized value for a certain key (which is maintained in the resource model, and driven by the data model)

例如，Tile UI如下所示:

For instance, the Tile UI would look like this:

<TileContainer id="container" tiles="{/tiles}">
    <StandardTile
      icon="{icon}"
      type="{type}"
      title="{ path : 'title', formatter : '.getI18nValue' }"
      info="{ path : 'info', formatter : '.getI18nValue' }"
      infoState="{infoState}" 
      press="handlePress"/>
</TileContainer>

(注意属性 title 和 info 的格式化程序函数 getI18nValue ；这些是要翻译的属性.其他属性来自绑定的JSONModel)

(Notice the formatter function getI18nValue for properties title and info; these are the properties to be translated. The other properties come as-is from the bound JSONModel)

该模型可能如下所示:

tiles : [
    {
        icon      : "sap-icon://inbox",
        number    : "12",
        title     : "inbox",   // i18n property 'inbox'
        info      : "overdue", // i18n property 'overdue'
        infoState : "Error"
    },
    {
        icon      : "sap-icon://calendar",
        number    : "3",
        title     : "calendar", // i18n property 'calendar'
        info      : "planned",  // i18n property 'planned'
        infoState : "Success"
    }
]

其中JSONModel的 title 和 info 属性值(例如，"inbox"和"overdue")与资源束文件中的键相对应(因此，您的ResourceModel)

where the title and info property values of the JSONModel (for instance, 'inbox' and 'overdue') correspond with a key in your resourcebundle files (and thus your ResourceModel)

控制器中的格式化程序功能(或者更好的是，在一个独立的JS文件中，可以在多个视图中重复使用)非常简单:

The formatter function in the controller (or better, in a standalone JS file, for re-use in multiple views) is then pretty simple:

getI18nValue : function(sKey) {
    return this.getView().getModel("i18n").getProperty(sKey);
}

它仅提供模型中的值(例如，收件箱")并从资源模型中返回此键的本地化值

It does nothing more than supplying the value from the model (for instance, 'inbox') and returning the localized value for this key from the resource model

这篇关于如何使用JSON文件和XML视图设置本地化数据绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！