时间戳

首页 > 解决方案 > 在自定义控件 UI5 中绑定 Multicombobox 的 selectedItems

javascript - 在自定义控件 UI5 中绑定 Multicombobox 的 selectedItems

问题描述

我想将来自控制器中 JsonModel 的 selectedItems 绑定到自定义控件。

自定义控件

sap.ui.define([
  'sap/ui/core/Control',
  'sap/m/MultiComboBox',
  ], function (Control, MultiComboBox) {
  return Control.extend('drex.control.TokenizedMultiComboBox', {
    metadata: {
      properties: {
        selectedKeys: { type: 'string[]', defaultValue: [] }
      },
      aggregations: {
        combo: { type: 'sap.m.MultiComboBox', multiple: false },
      },
    },

    init: function (allItems) {
      Control.prototype.init.apply(this, arguments);
    },

    onAfterRendering: function() {
      const combo = this.getAggregation('combo');
      const selectedKeys = this.getSelectedKeys();
      if (selectedKeys.length) {
        combo.setSelectedKeys([selectedKeys]);
      }
    },

    renderer: function (rm, oControl) {
      rm.write('<div');
      rm.writeControlData(oControl);
      rm.write('>');
      rm.write('<div>');
      rm.renderControl(oControl.getAggregation('combo'));
      rm.write('</div>');
      rm.write('</div>');
    },
  })
})

XML

<drex:TokenizedMultiComboBox
    selectedKeys="{selectedItems>/disease}" />

在selectedItems>/disease控制器中定义的位置：

this.getView().setModel(new JSONModel(), 'selectedItems');

问题是自定义控件中的 Multicombobox 不包含 selectedItems 的任何值。

标签： javascriptsapui5

解决方案

好的，我找到了答案，感谢How can I set Selected items in a sapui5 MultiComboBox?

...
metadata: {
      properties: {
        selectedKeys: { type: 'string', defaultValue: '' }
      },
      aggregations: {
        combo: { type: 'sap.m.MultiComboBox', multiple: false },
      },
    },

onAfterRendering: function() {
      const combo = this.getAggregation('combo');
      const selectedKeys = this.getSelectedKeys();
      combo.bindProperty('selectedKeys', selectedKeys);
    }
...

我现在将模型路径作为字符串传递。XML

<drex:TokenizedMultiComboBox
    selectedKeys="selectedItems>/disease" />

希望这是一个正确的方法..

推荐阅读