Question

我正在处理显示 SimpleForm 元素的页面。这个SimpleForm中的一个元素是Dropdownbox。我需要在编程时使用值填充此Dropdownbox，但我似乎无法使用以下代码（摘录）来掌握它：

var html =  '<template>' +
        '<div data-sap-ui-type="sap.ui.layout.form.SimpleForm" id="sf2">' +
        '<div data-sap-ui-type="sap.ui.core.Title" id="T1" 
           data-text="Template Text"></div>' +
        '<div data-sap-ui-type="sap.ui.commons.TextArea" id="L1" 
         data-height="500px" data-value="some long text here "></div>' +
        '<div data-sap-ui-type="sap.ui.core.Title" id="T2" 
           data-text="Configuration"></div>' +
        '<div data-sap-ui-type="sap.ui.commons.DropdownBox" id="L3"></div>' +
        '</div>' +
        '</template>';

var myView   =  sap.ui.view({id:"myView",viewContent:html,
                            type:sap.ui.core.mvc.ViewType.HTML})  
                 myView.placeAt("content");

我试过制作

'<div data-sap-ui-type="sap.ui.commons.DropdownBox" id="L3"></div>' +

看起来像

'<div data-sap-ui-type="sap.ui.commons.DropdownBox" id="L3" 
     data-items="/test"></div>' +

但是当我这样做时遇到以下错误： 未捕获错误：基数为0..n的聚合项目仅允许将绑定路径作为属性值

我也试图定义一个这样的模型：

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
    hardware:[
        {device:"PC", enabled:true},
        {device:"Monitor", enabled:true},
        {device:"Keyboard", enabled:false},
        {device:"Mouse", enabled:true},
        {device:"Speaker", enabled:false},
        {device:"Printer", enabled:true}],
    editable: true, 
    tooltip: "Device"});
sap.ui.getCore().setModel(oModel);

然后填充我的字段：

$("#L3").setModel(oModel);

但是当我这样做时收到以下错误： 未捕获的TypeError：undefined不是函数

我认为在#L3实际存在之前调用模型的行被调用。

知道如何才能让它发挥作用吗？

Answer 1

添加花括号以更正数据绑定声明的绑定路径：data-items="{/hardware}"

<div data-sap-ui-type="sap.ui.commons.DropdownBox" id="L3" 
 data-items="{/hardware}"></div>

将列表项模板添加到Dropdownbox

<div data-sap-ui-type="sap.ui.core.ListItem" data-text="{device}" 
data-enabled="{enabled}" ></div>

请运行并检查代码段。它应该回答你的问题。

与您的问题无关的一件事是，建议使用XML view或JS view代替过时的HTML视图。

＆＃13;

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
  
<script>
  
  var html =  '<template>' +
        '<div data-sap-ui-type="sap.ui.layout.form.SimpleForm" id="sf2">' +
        '<div data-sap-ui-type="sap.ui.core.Title" id="T1" data-text="Template Text"></div>' +
        '<div data-sap-ui-type="sap.ui.commons.TextArea" id="L1" data-height="500px" data-value="some long text here "></div>' +
        '<div data-sap-ui-type="sap.ui.core.Title" id="T2" data-text="Configuration"></div>' +
      '<div data-sap-ui-type="sap.ui.commons.DropdownBox" id="L3" data-items="{/hardware}">'+
      '<div data-sap-ui-type="sap.ui.core.ListItem" data-text="{device}" data-enabled="{enabled}" ></div>'
         
  
        +'</div>' +
        '</div>' +
        '</template>';

var myView   =  sap.ui.view({id:"myView",viewContent:html,
                            type:sap.ui.core.mvc.ViewType.HTML}) ; 
                 myView.placeAt("content");
  
  var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
    hardware:[
        {device:"PC", enabled:true},
        {device:"Monitor", enabled:true},
        {device:"Keyboard", enabled:false},
        {device:"Mouse", enabled:true},
        {device:"Speaker", enabled:false},
        {device:"Printer", enabled:true}],
    editable: true, 
    tooltip: "Device"});
sap.ui.getCore().setModel(oModel);
  
</script>
         
<body id="content">

</body>

＆＃13;

如何在SimpleForm中填充dropdownbox

1 个答案: