Binding in Control with “class” Attribute

问题

I want to handle the colors of the values in Text control (sap.m). If the value is "TRUE", the color is green. Otherwise it will be red if the value is "FALSE".

<Text
  class="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'greenTextColor' : redTextColor'}"
  text="{HintTable>IS_ENABLED}"
/>

But it doesn't seem to be working. I mean, the class cannot receive the "greenTextColor" nor "redTextColor".

Did I make something wrong?

回答1:

UI5 doesn't support binding for class in XML view directly as it's not a valid property of ManagedObject. Nevertheless, there is a workaround by adding custom data:

Add CustomData with the property writeToDom^api to your control. Use your expression binding there:
```
<Text xmlns="sap.m" class="myText" text="...">
  <customData>
    <core:CustomData xmlns:core="sap.ui.core"
      key="green"
      value="foo"
      writeToDom="{= expression}"
    />
  </customData>
</Text>
```
Depending on the outcome of your expression binding, data-green will be added to the control's HTML element. The browser can then manipulate the color corresponding to the attribute selector.
Your CSS should thus include the selector accordingly:
```
.myApp .sapMText.myText[data-green] {
  /* ... */
}
```

Here is an example: https://embed.plnkr.co/LAv1qfsUjX0Anu7S/

Of course, you can also bind anything you want to the value property of the CustomData in order to react on more granular CSS selectors. To learn more about how to leverage custom data in DOM, check out the documentation topic Writing Data to the HTML DOM as DATA-* Attribute.

Note

SAP recommends to avoid specifying colors with custom CSS classes.

Fiori apps should not override styles. [...] Do not specify colors in custom CSS but use the standard theme-dependent classes instead.
There are alternatives when it comes to styling sap.m.Text:
- Text with semantic colors: sap.m.ObjectStatus, ..ObjectNumber
- Text with custom formats: sap.m.FormattedText.

Generally, the importance of adding custom CSS styles should be always questioned and double-checked with the stakeholders, not only for UI consistency across Fiori apps but also to reduce the maintenance costs and TCO that would otherwise rise significantly with custom CSS.

回答2:

If you are using a local JSONModel for HintTable and the IS_ENABLED property is on the root level of the model you have to access it with a slash "HintTable>/IS_ENABLED". Try it.
I'm not sure if you can bind class attributes. Never tried it.

回答3:

The answer of Boghyon Hoffmann is great!

But if none of his options should work for you, you can always resort to using two different copies of the Text element together with the visible attribute (which supports expression binding):

<Text
  class="greenTextColor"
  text="{HintTable>IS_ENABLED}"
  visible="{= ${HintTable>IS_ENABLED === 'TRUE'} }"
/>
<Text
  class="redTextColor"
  text="{HintTable>IS_ENABLED}"
  visible="{= ${HintTable>IS_ENABLED !== 'TRUE'} }"
/>

Tipp:
Simplify your expressions, if your model contains bools instead of strings:

  visible="{= ${HintTable>IS_ENABLED} }"

and

  visible="{= !${HintTable>IS_ENABLED} }"

来源：https://stackoverflow.com/questions/42221962/binding-in-control-with-class-attribute

标签

sapui5