Question

我可以使用表达式中的属性“type”轻松更改视图中的按钮。

 type="{= (${Orders>SupplierNote} &amp;&amp; ${Orders>SupplierNote} !== '') ?     
'Reject' : (${Orders>InternalNote} &amp;&amp; ${Orders>InternalNote} !== '') ? 
'Emphasized' : 'Default'}"/>

问题是，我该如何为Text组件执行此操作？

我无法覆盖该类，但它没有类型。

Answer 1

它可以理解Text控件没有类似属性的东西。在Button的上下文中，它具有清晰的语义（Accept，Reject，...），而对于Text控件来说很难实现相同的语义。但是，渲染器仅使用Button的类型来应用特定样式类。你也可以用Text做类似的事情：

<Text class="customStyleClass" text="Hellow World!"/>

现在应用了自定义样式类。不幸的是表达式绑定在这里不起作用如果您需要使样式取决于您的数据，您可以write自定义DOM数据并在自定义样式类中使用它。但是，应该稀疏地使用它。

Answer 2

以下是我如何实现CustomData以添加带有表达式Binding ...

的类

在视图....

  <Text text="{Orders>EmailAddress}" tooltip="{Orders>EmailAddress}">
      <customData>
         <core:CustomData key="mydata" value="{=     (${Orders>Status} === '2' ) ? 'Red' : (${Orders>Status} === '1') ? 'Green' : (${Orders>Status} === '0') ? 'Amber' : ''}" writeToDom="true" />
      </customData>
  </Text>

现在的CSS .....

.sapMText[data-mydata="Red"] {
    color:#cc1919;
}

.sapMText[data-mydata="Green"] {
    color:#007833;
}

.sapMText[data-mydata="Amber"] {
    color:#d14900;
}

Answer 3

您可以使用两个文本控件，每个控件都带有一个类选项，然后对visible属性使用条件控件。

const json = {
  "nodes": [
    {"country": "US", "name": "saint peter's"},
    {"country": "Brazil", "name": "saint joseph's"}        
  ],
  "links": [  ],
  "CategList": [
        {
          "categ": "category1",
          "id": "US"
        },
        {
          "categ": "category2",
          "id": "BR"
        },
        {
          "categ": "category3",
          "id": "DE"
        },
      ]   
}

const myData = json.CategList.map(o => o.categ)

function createFilter()
{

    d3.select(".filterContainer").selectAll("div")
        .data(myData)
        .enter()
        .append("div")
        .attr("class", "checkbox-container")
        .append("label")
        .each(function(d) {
            // create checkbox for each data
            d3.select(this)
                .append("input")
                .attr("type", "checkbox")
                .attr("id", function(d) {return "chk_" + d;})
                .attr("checked", true)
                .on("click", function(d, i) {
                    // register on click event
                    var lVisibility = this.checked? "visible":"hidden";
                    filterGraph(d, lVisibility);
                })
            d3.select(this).append("span")
                .text(function(d){return d;});
        });

}

这种方法存在一些缺点，例如，如果有许多此类文本控件，则开销很大，如果必须参考代码上的文本，则需要确定可见版本等。

从视图中更改sap.m.Text组件的格式

3 个答案: