Home > Mobile >  How to reach upper context in UI5 XML Loops?
How to reach upper context in UI5 XML Loops?

Time:11-13

I wonder how to reach relatively the upper loop context when you are within a loop.

Let's say you have data like this:

{
  items: [
    {
      title: "My Title",
      subItems: [
        {
          name: "My name"
        }
      ]
    }
  ]
}

And a template like this:

  <List
    showSeparators="None"
    items="{path: 'model>/items', templateShareable: false}"
  >
    <items>
      <CustomListItem>
        <List
          showSeparators="None"
          items="{path: 'model>subItems', templateShareable: false}"
        >
          <items>
            <CustomListItem>
              <Text text="HOW TO PRINT 'My Title' HERE ??">
            </CustomListItem>
          </items>
        </List>

      </CustomListItem>
    </items>
  </List>

How can I print My Title in the <Text /> in the middle of both loops?

CodePudding user response:

AFAIK, there is no way to do this in the XML template, unless the path is static:

<Text text="{model>/items/0/title}">

If it is not, you should consider checking factory functions.

When you use one, you basically override the default 'item cloner' and thus can add arbitrary logic there, e.g you can check if an item matches certain criteria and then bind it's property to the path you wish:

myItemFactory: function(sNewItemId, oBindingContext){
    const oItem = this.byId('myDependentTemplate').clone(sNewItemId);
    const bShouldDisplayTitle = oBindingContext.getProperty('shouldDisplayTitle');

    if(bShouldDisplayTitle){
        oItem.bindProperty('text','model>/my/path/to/prop');
    }

    return oItem;
}

CodePudding user response:

There is no simple solution. Please have a look at Qmarco's answer.

The way around is to use a custom formatter. With custom formatter:

return this.getParent().getBindingContext("sample").getProperty("columnName");

you can access the upper context of the model with:

      <Title text="{
        path: 'sample>name',
        formatter: 'demo.model.formatter'
      }" 

Here is the working plnkr code.

  • Related