使用 XML-View 将浏览器事件附加到控件

Question

我的 REST 服务向我发送了大量数据。每个属性都包含 value 和一个 help 属性，该属性包含字段属性.

的详细描述

好的，我在 JSONModel 中有数据（包含价值和帮助的属性列表），我使用 data-binding XML https://openui5.hana.ondemand.com/#docs/guide/91f0f3cd6f4d1014b6dd926db0e91070.html 将数据 value 映射到表单和 table 中。现在我想以某种方式为每个属性显示 help 消息。

我的想法是在 table

中显示 header 列的 message dialog when the user double-click on the Label or on the Text

Label 和 Text 都有 attachBrowserEvent 方法，但是我不知道如何使用该函数来附加事件 只能在 XML-views

我想要这样的东西：

在XML-View中：

<Label text="Language" 
          attachBrowserEvent:"function("click",showMessageHelp({model>/language/help}))">

<Input value="{model>/language/value}"/>

在控制器中：

showMessageHelp:function(sMessage){

//show message dialog with sMessage
...........
}

Answer 1

您可以使用 onAfterRendering 方法实现此目的。在 XML:

中有 CustomData

<Label id="label" text="Language">
    <customData>
          <core:CustomData key="type" value="{/language/help}" />
    </customData>
</Label>

然后在控制器中使用这个自定义数据：

  onAfterRendering: function () {
        var showValueHelp = function () {
            var text = this.getCustomData()[0].getValue();
            sap.m.MessageToast.show(text);
            event.preventDefault();
            event.stopPropagation();
            return false;
        };

        this.byId("label").attachBrowserEvent("click", showValueHelp);
    }

JS fiddle is here

PS：我不确定这是否适合您。这是我目前能想到的最好的。

Answer 2

可以为每个标签附加一个浏览器事件，但我找不到不重复每个标签 ID 的方法。

我找到了另一种解决方案：我的数据显示在表格和表格中。我在每个表单的右侧添加了一对 label: value 带有帮助信息的文本元素：

    <Label text="Field duck"/>
    <Text text="{model>/elements/mainFields1/duck/value}"/>
    <Text text="{model>/elements/mainFields1/duck/ATTR/help/description}" visible="{ui>/bShowHelp}" />

在表格中，我将每列标题分为两组：header 和 footer；在页脚中我放置了帮助信息：

<Column>
   <header>
      <Text text="Name"/>
   </header>
   <footer>
      <Text text="{model>/elements/airports/templateNewRow/name/ATTR/help/description}" visible="{ui>/bShowHelp}"/>
   </footer>
</Column>

我更改 bShowHelp 显示和隐藏所有帮助信息的值

使用 XML-View 将浏览器事件附加到控件

Attach browser event to a control using XML-View

sapui5