Question

https://sapui5.hana.ondemand.com/#/controls处的文档提供了许多SAPUI5样本。但所有视图都是用XML编写的。我可以在其他地方找到用Javascript编写的示例，但我要求一般规则应用于XML代码。这是一个示例List.view.xml，我需要手动转换为List.view.js

<mvc:View
height="100%"
controllerName="sap.m.sample.ListSelectionSearch.List"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
    showHeader="false" >
    <subHeader>
        <Toolbar>
            <SearchField
                liveChange="onSearch"
                width="100%" />
        </Toolbar>
    </subHeader>
    <content>
        <List
            id="idList"
            items="{/ProductCollection}"
            selectionChange="onSelectionChange"
            mode="MultiSelect"
            includeItemInSelection="true" >
            <infoToolbar>
                <Toolbar
                    visible="false"
                    id="idInfoToolbar" >
                    <Label id="idFilterLabel" />
                </Toolbar>
            </infoToolbar>
            <items>
                <StandardListItem
                    title="{Name}"
                    description="{ProductId}"
                    icon="{ProductPicUrl}"
                    iconDensityAware="false"
                    iconInset="false" />
            </items>
        </List>
    </content>
</Page>

任何帮助将不胜感激。

Answer 1

SAPUI5的{{1}}中的内容与控制器中的列表汇总相同：

或者，看看这个完整的应用程序Example SAPUI5 JSView Application

OR

通过按 CTRL + SHIFT + ALT + S 和API参考

来使用诊断工具

JSView

Answer 2

不应该那么困难：

OR 您可以继续编写XML，然后使用API从中创建JS实例：

（**）这里可能是最棘手的部分。你怎么知道这应该包含在“内容”属性中？很容易！如果您在另一个中直接看到一个控件（没有任何标签），则表示内部控件是父控件的默认聚合。因此，您需要做的就是检查父控件的默认聚合的名称。如果是sap.m.Toolbar，则为new sap.m.Page({ showHeader: false, subHeader: new sap.m.Toolbar({ content: [ // (**) new sap.m.SearchField({ liveChange: onSearch, // event handler width: "100%" }) ] }), content: [ new sap.m.List({ //... }) ] });。

更新：但是，可能很难理解哪个聚合是默认的，因为在我们的文档中我们不会显示此信息。我将就此事与负责团队联系。作为解决方法，可以从源代码中获取此信息，例如sap.m.Page - 请参阅元数据说明中的content定义。

Answer 3

请参见下面的示例

查看：

sap.ui.jsview("ResourceRootName.view.ViewName", {

    getControllerName: function() {
        return "ResourceRootName.view.ViewName";
    },

    createContent : function(oController) {

        this.oList = new sap.m.List({
            showUnread: true,
            mode: sap.ui.Device.system.phone ? sap.m.ListMode.None : sap.m.ListMode.SingleSelectMaster,
            itemPress: [oController.onListSelect, oController]
        });

        this.page = new sap.m.Page({
            title: "{i18n>pageTitle}",
            navButtonText: "Home",
            showNavButton: true,
            navButtonPress: function() {
                oController.handleNavBack();
            },
            subHeader: new sap.m.Bar({
                contentMiddle: [
                    new sap.m.SearchField(oController.createId("searchFieldTasks"), {
                        width: "100%"
                    })
                ]
            }),
            content: [this.oList]
        }); 

        return this.page; //Note: if you need to return more than two controls you can do so by using array
    }
});

在控制器中，您可以按以下方式绑定列表

控制器：

this.getView().oList.bindAggregation("items", {
      path: "/EntityCollectionSet",
      template: new sap.m.StandardListItem({
                title: "{Title}",
                description: "{Description}"
            }),
      filters: []//If you want to pass any filters
    });

在sapui5中手动将XML视图转换为Javascript视图

3 个答案: