Question

我想使用声明支持向List添加项目。例如：

这是我的代码。我想把list元素放在标记所说的位置：

            // I want to insert elements here......

由于

     <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

</head>

<body>
 <script id='sap-ui-bootstrap'
        type='text/javascript'
        src='https://openui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
        data-sap-ui-libs="sap.ui.commons,sap.m"
        data-sap-ui-modules='sap.ui.core.DeclarativeSupport'
>
</script>


             <div data-sap-ui-type='sap.m.ListBase' > 
                <div data-sap-ui-aggregation="content"> 
                // I want to insert elements here......
                 </div> 
             </div> 


     <div data-sap-ui-type='sap.ui.ux3.NavigationBar'>
        <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1"data-text="Item with some text 3"></div>
        <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div>
        <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div>
        </div>
</div>
</body>

</html>

Answer 1

以下是声明支持的两个示例（省略了HTML标记）。

第一个显示你想要的NavigationBar：

    <head>
        <script id="sap-ui-bootstrap"
            type="text/javascript"
            src="resources/sap-ui-core.js"
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-modules="sap.ui.core.DeclarativeSupport">
        </script>
        <script>
            sap.ui.getCore().attachInit(function() {
                var navbar = sap.ui.core.DeclarativeSupport.compile(document.getElementById("navbar"));
            });
        </script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
    <div id="navbar">
        <div data-sap-ui-type="sap.ui.ux3.NavigationBar">
            <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1"data-text="Item with some text 3"></div>
            <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div>
            <div data-sap-ui-type="sap.ui.ux3.NavigationItem" data-key="item1" data-text="Item with some text 3"></div>
        </div>
    </div>

第二个使用带有StandardListItem和模型绑定的List：

    <head>
        <script id="sap-ui-bootstrap"
            type="text/javascript"
            src="resources/sap-ui-core.js"
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-modules="sap.ui.core.DeclarativeSupport">
        </script>
        <script>
            sap.ui.getCore().attachInit(function() {
                var list = sap.ui.core.DeclarativeSupport.compile(document.getElementById("list"));
                sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel({
                    "items" : [
                        { "name" : "Test" },
                        { "name" : "Declaritive Support"}]
                }), "data");
            });
        </script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
    <div id="list">
        <div data-sap-ui-type="sap.m.List" data-items="{data>/items}">
            <div data-sap-ui-aggregation="items">
                <div data-sap-ui-type="sap.m.StandardListItem" data-title="{data>name}"></div>
            </div>
        </div>
    </div>

可以找到更多详细信息here。请注意，您不能使用ListBase，因为它只是列表样式控件的基本实现，例如清单或表格。也可以跳过定义聚合的div，因为UI5具有默认聚合的概念，在这种情况下是项目。这也可以在第一个例子中看到。

使用声明性支持将项添加到sap.m.list

1 个答案: