Question

我目前正在学习SAP UI5，但我找不到有关如何在sap.m.Select中显示项目的足够信息，我想要做的是将我自己的数组中的项目显示为下拉列表并添加锚点链接到所有这些，如：

var myMenuItems = ["foo","bar","baz"];

我设法构建了一个Select Menu，但没有找到添加项目的方法，所以它现在看起来是空的。

我的选择代码是：

new sap.m.Select(this.createId("selector"), {
                name:"selectName",
                selectedKey: "foo",
                icon: "sap-icon://navigation-down-arrow", 
                valueState:"Success",
                valueStateText:"random text idk what for",
                forceSelection:false
            })

如何推送myMenuItems的项目并在此Select中显示？

Answer 1

sap.m.Select是一个非常强大的控件。你需要Ash提到的模型。以下是您案例的工作示例：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_belize"></script>
    <script>
        var oData = {
            MenuItems: [{id: 1,name: "foo"},{id: 2,name: "bar"},{id: 3,name: "baz"}]
        };
        var oModel = new sap.ui.model.json.JSONModel(oData);
        var oSelect = new sap.m.Select({
            id: "selector",
        });
        var oItemSelectTemplate = new sap.ui.core.Item({
            key: "{id}",
            text: "{name}"
        }); //Define the template for select items
        oSelect.setModel(oModel);// set model to Select element
        oSelect.bindAggregation("items", "/MenuItems", oItemSelectTemplate); //bind aggregation with the template to items
        oSelect.placeAt('content');
    </script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>

Answer 2

Ash Kander是对的，你必须创建一个包含数据的模型。

SAP UI5 SDK的数据绑定部分应该向您展示如何执行此操作以及如何将其绑定到您的选择：

https://sapui5.hana.ondemand.com/#/topic/e5310932a71f42daa41f3a6143efca9c

作为快速摘要，您可以创建模型并将其设置在控制器的onInit方法中的Select中，该方法与Select所在的视图相关联：

var oMenuItemsModel = new sap.ui.model.json.JSONModel({
  "menuItems": [
    {"item": "foo"},
    {"item": "bar"},
    {"item": "baz"}
  ]
});
this.getView().setModel(oMenuItemsModel, "myMenuItems");

<Select items="{myMenuItems>/menuItems}">
    <core:Item key="{myMenuItems>item}" text="{myMenuItems>item}" />                            
</Select>

然后它应该工作。

这基本上都取自SDK上的代码示例：

https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.Select/code

在sap -select中显示数组项并向项添加锚标记

2 个答案: