以编程方式将UI5控件的CSS类绑定到模型值

问题描述

有没有办法将sap.ui.table.Table内ui5-input-template的class属性绑定到模型值？

到目前为止我尝试的是：

[
  {
    label: 'arow',
    disabled: true,
    class: 'myClass1',
    data: [
      {
        value: 'rowVal1'
      }
    ]
  },
  // ...
]

和

myTable.bindColumns("/columns", function (index: string, context: any) {
  let indParts: string[] = index.split("-");
  let ind = +indParts[indParts.length - 1];
  var colLabel = context.getProperty().label;
  let template = new sap.m.Input({
    value: `{data/${ind}/value}`,
    class: '{= ${class} }',
    enabled: '{= !${disabled} && !${data/' + ind + '/disabled} }',
  });
  // template.addStyleClass('{class}');
  // template.setClass('{class}');
  let column =  new sap.ui.table.Column({
    label: colLabel,
    width: `{width}`,
    template: template,
  });
  return column;
});
myTable.bindRows("/rows");

这里似乎不能使用模型绑定，只能在创建模板时添加静电类值。这样对吗？

推荐答案

正如注释中所建议的，解决方案之一是使用您自己的属性增强控件的属性集，以允许绑定Style类。

以下是工作示例：https://embed.plnkr.co/ik9PIdHKvK8udpQt?show=control%2FInput.js,preview

这里是控件扩展的一段代码：

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

  return Input.extend("demo.control.Input", {
    metadata: {
      properties: {
        "styleClass": {
          type: "string",
          defaultValue: null,
          bindable: true,
        }
      }
    },

    renderer: {
      apiVersion: 2, // allow DOM-patching aka. "semantic rendering"
      addOuterStyles: function(oRenderManager, oInput) {
        InputRenderer.addOuterStyles.apply(this, arguments);
        oRenderManager.class(oInput.getStyleClass());
      },
    },

  });
});

如Extending Input Rendering主题中所述，某些基控件允许覆盖呈现器中的现有方法。例如，如果您查看InputBaseRenderer.js，您可以看到呈现器提供了多个钩子，供addOuterClasses这样的子类覆盖：

由于styleClass是ManagedObject的有效属性，因此JS("；以编程方式"；)中的绑定也应该起作用：

new Input({ // required from "demo/control/Input"
  // ...,
  styleClass: "{= ${class}}"
});

这篇关于以编程方式将UI5控件的CSS类绑定到模型值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！