控件中的绑定与"类"属性

Question

我想处理Text控件(sap.m)中值的颜色.如果值为"TRUE",则颜色为绿色.否则,如果值为红色,则为红色"FALSE".

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

但它似乎没有奏效.我的意思是,class不能接受"greenTextColor"也不"redTextColor".

我做错了什么？

Answer 1

UI5 不支持绑定class在XML视图中直接,因为它不是一个有效的财产ManagedObject.不过,添加自定义数据有一种解决方法:

1. ManagedObject将属性添加CustomData到您的控件.在那里使用表达式绑定:

   <Text xmlns="sap.m" class="myText" text="...">
     <customData>
       <core:CustomData xmlns:core="sap.ui.core"
         key="green"
         value="foo"
         writeToDom="{= expression}"
       />
     </customData>
   </Text>
   

   根据表达式绑定的结果,writeToDom将添加到控件的DOM元素中.然后,浏览器可以操纵与属性选择器对应的颜色.

2. 因此,您的CSS应该相应地包含选择器: data-green

当然,您还可以将所需的任何内容绑定到value属性,以便对更精细的CSS选择器做出反应.要了解有关如何利用DOM中的自定义数据的更多信息,请参阅文档中将数据写入HTML DOM作为DATA-*属性一节.

注意

• SAP建议避免使用自定义CSS类指定颜色.

  Fiori应用程序不应覆盖样式.[...]不要在自定义CSS中指定颜色,而是使用标准的主题依赖类.

• 在造型方面还有其他选择CustomData:
  • 具有语义颜色的文本:sap.m.ObjectStatus ,. ObjectNumber
  • 自定义格式的文本:sap.m.FormattedText(具有sap.m.Text甚至支持sap.m.ObjectStatus标记的属性).

一般来说,添加自定义CSS样式的重要性应始终受到质疑并与用户进行双重检查,不仅要考虑到Fiori应用程序之间的UI一致性,还要降低维护成本,否则这些成本会因定制CSS而显着提高.