UI5 自定义控件，在表格中使用时数据绑定不起作用 [英] UI5 custom control, data binding not working when used in a table

问题描述

我的自定义控件的数据绑定有问题.

I have problems with data binding of my custom control.

我的控件继承自 sap.m.Input 并用一个特殊的值助手扩展它.
我的新控件的新属性之一是值帮助对话框的简单标题.这绑定到 i18n 模型.

My control inherits from sap.m.Input and extends it with a special value helper.
One of my new properties of my new control is a simple header for the value help dialog. This is bound to an i18n model.

当我现在以正常形式使用我的控件时，一切正常.标题已正确绑定并显示该模型中绑定的 i18n 属性的值.如果我使用我的控件作为 sap.ui.table 控件列中的模板，它只显示 title 属性的默认值.数据绑定似乎不起作用.但仍在处理继承的属性(例如值).

When I now use my control in a normal form, everything works. The title is bound correctly and shows the value of the bound i18n property in that model. If I use my control as a template in a column of a sap.ui.table control, it only shows the default value of the title property. Data binding does not seem to work. But is still working on the inherited properties (such as value).

这里为了简化，我的控件现在只有那个 title 属性，如果请求 valuehelp，它会在警告框中显示当前值.在表中，它显示了默认值.没有表格，它显示了来自 i18n 模型的绑定值.

For simplification here my control which now has only that title property and if valuehelp is requested, it shows the current value in an alert box. In table, it shows the default value. And without table, it shows the bound value from i18n model.

这里是简化的控制代码:

Here the simplified control code:

sap.ui.define([
  "sap/ui/core/Control",
  "sap/m/Input",
], function(Control, Input) {
  "use strict";

  return Input.extend("DvpClsSuggestInput", {
    "metadata": {
        "properties": {
          // Title of Value-Help Dialog
          "vhTitle": {
            type: "string",
            defaultValue: "Title"
          }
        }
      },

      init: function() {
        Input.prototype.init.call(this);
        this.setShowValueHelp(true);
        this.attachValueHelpRequest(this.onValueHelpRequest.bind(this));
      },

      onValueHelpRequest: function(oEvent) {
        var lvTitle = this.getVhTitle();
        alert(lvTitle);
      },

    });
  });
});

在 sap.ui.table.Table 中的使用(它不起作用并显示 title 属性的默认值):

Usage in sap.ui.table.Table (which doesn't work and shows the default value of the title property):

<table:Column>
  <m:Label text="{i18gn>HausWaehrung}" />
  <table:template>
    <dvp:MyInput
      value="{ path : 'Inv>Hwaer', type : 'sap.ui.model.type.String' }"
      vhTitle="{i18n>Currency}" />
  </table:template>
</table:column>         

有效的用法:

<VBox>
  <dvp:MyInput
    value="{
      path: 'Cls>/Currency',
      type: 'sap.ui.model.type.String'
    }"
    vhTitle="{i18n>Currency}" />
</VBox>

再一次，绑定到 value 属性有两种方式.问题仅存在于我自己的属性 vhTitle.欢迎提出任何想法.

Once again, binding against the value property works in both ways. Problem only exists with my own property vhTitle. Any Ideas are welcome.

推荐答案

这是一个工作示例:https://embed.plnkr.co/Va7C1BpyiV1jEV87

一般来说:侦听器对象应该始终作为参数传递，而不是使用bind:

In general: the listener object should be passed always as an argument instead of using bind:

this.attachValueHelpRequest(this.onValueHelpRequest.bind(this), this);

在我们的例子中:可以完全省略监听器:

this.attachValueHelpRequest(this.onValueHelpRequest);

然后框架会将当前事件提供程序(控件实例)作为 API 参考中所述的侦听器对象传递:

The framework will then pass the current event provider (control instance) as the listener object as described in the API reference:

如果未指定 ，则在事件提供程序的上下文中调用处理程序函数.(来源)

If <oListener> is not specified, the handler function is called in the context of the event provider. (source)

<小时>

为什么 .bind(this) 有时不起作用

如果控件作为模板控件提供(例如在 中，如问题所示)，UI5 会使用 clone API 克隆该模板其中所有注册的事件处理程序也被考虑到 (代码).

---

Why .bind(this) doesn't work sometimes

If the control is provided as a template control (e.g. in <table:template> as shown in the question), UI5 clones that template using the clone API in which all the registered event handlers are also taken into account (code).

在init中注册事件处理程序时，this.onValueHelpRequest.bind(thisArg)thisArg> 是模板控件，不是具有所有绑定的克隆实例.
更糟糕的是，bind 不会让你改变之前传递的 thisArg 即使框架 尝试调用函数之后根据 规范thisArg>(见注 2).

When the event handler was registered in init, the thisArg in this.onValueHelpRequest.bind(thisArg) was the template control, not the clone instance which has all the bindings.
To make things worse, bind won't let you change the previously passed thisArg even if the framework tries to call the function afterwards with a different thisArg according to the spec (see Note 2).

这会导致从模板中获取旧值，而不是从渲染克隆中获取实际值.

This leads to getting the old values from the template rather than the actual values from the rendered clones.

这篇关于UI5 自定义控件，在表格中使用时数据绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！