How does localized data binding bind to JSON files and XML views?

Question

I have an XMLView homepage containing some snippets. These fragments are populated from the JSON file. Plates have a "title" attribute, which requires i18n data binding.

Part of the XML representation:

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

JSON file:

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

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

This is also my Component.js, where I install 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 a discussion of another issue, so there may be more information for everyone interested. Link

Answer 1

, , ( )

, Tile :

<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>

( getI18nValue title info, , . 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"
    }
]

title info JSONModel (, "inbox" "overdue" ) resourcebundle (, , ResourceModel)

(, , JS ) :

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

, (, "inbox" )