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

位于的文档提供了许多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>

---

任何帮助都将不胜感激。

应该没有那么困难：

new sap.m.Page({
showHeader:false，
副标题：新sap.m.Toolbar({
内容：[/（**）
新sap.m.SearchField({
liveChange:onSearch，//事件处理程序
宽度：“100%”
})
]
}),
内容：[
新sap.m.List({
//...
})
]
});

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

（**）这里可能是最棘手的部分。您怎么知道应该将其包装在“content”属性中？很简单！如果您直接看到一个控件在另一个控件内部（周围没有任何标记），则表示内部控件处于父控件的默认聚合中。因此，您只需检查父控件的默认聚合的名称。如果是

内容

---

更新：但是，可能很难理解哪个聚合是默认聚合，因为在我们的文档中，我们没有显示此信息。我将就此问题与负责团队联系。作为一种解决方法，可以从源代码中获取此信息，例如-请参见元数据描述中的

defaultAggregation

定义。

应该没有那么难：

new sap.m.Page({
showHeader:false，
副标题：新sap.m.Toolbar({
内容：[/（**）
新sap.m.SearchField({
liveChange:onSearch，//事件处理程序
宽度：“100%”
})
]
}),
内容：[
新sap.m.List({
//...
})
]
});

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

（**）这里可能是最棘手的部分。您怎么知道应该将其包装在“content”属性中？很简单！如果您直接看到一个控件在另一个控件内部（周围没有任何标记），则表示内部控件处于父控件的默认聚合中。因此，您只需检查父控件的默认聚合的名称。如果是

内容

---

更新：但是，可能很难理解哪个聚合是默认聚合，因为在我们的文档中，我们没有显示此信息。我将就此问题与负责团队联系。作为一种解决方法，可以从源代码中获取此信息，例如-参见元数据描述中的

defaultAggregation

定义。

这里与

SAPUI5

的

JSView

中相同，在控制器中完成列表聚合：

或者，看看这个完整的应用程序

或

使用诊断工具，按CTRL+SHIFT+ALT+S和API参考键

sap.ui.define（[“sap/m/Page”、“sap/m/List”、“sap/m/Toolbar”、“sap/m/SearchField”、“sap/m/Label”、“sap/m/Text”]），函数（页面、列表、工具栏、搜索字段、标签、文本）{
“严格使用”；
返回sap.ui.jsview（“sap.m.sample.ListSelectionSearch.View”{
getControllerName:函数（）{
返回“sap.m.sample.ListSelectionSearch.List”；
},
createContent:函数（oController）{
var oToolbar=新工具栏({
可见：对，
内容：[
新搜索字段({
liveChange:function（）{
oController.onSearch（）；
},
宽度：“100%”
})
]
});
var oInfoToolbar=新工具栏({
内容：新工具栏（this.createId（“idInfoToolbar”）{
可见：对，
内容：新文本({
文本：“标签文本”
})
})
});
var oList=新列表（this.createId（“idList”）{
模式：“多选”，
包容性选择：正确，
infoToolbar:oInfoToolbar
});
var oPage=新页面（this.createId（“oPageId”）{
高度：“100%”，
标题：“页面标题”，
showHeader：是的，
副标题:对,，
主要内容：耳嗅巴，
内容：[寡头党]
});
var app=新的sap.m.app（）；
app.addPage（oPage）；
附件placeAt（“内容”）；
返回应用程序；
}
});
});
//内部控制器
定义（[“sap/m/StandardListItem”，“sap/ui/model/json/JSONModel”]，函数（StandardListItem，JSONModel）{
“严格使用”；
变量oData={
“产品集合”：[{
“titleId”：0，
“名称”：“Olayinka Otuniyi”，
“ProductId”：“001”，
“ProductPicUrl”：“sap-icon://competitor"
}, {
“titleId”：1，
“姓名”：“玛丽亚·安德斯”，
“产品ID”：“002”，
“ProductPicUrl”：“sap-icon://badge"
}, {
“titleId”：2，
“姓名”：“安娜·特鲁希略”，
“产品ID”：“003”，
“ProductPicUrl”：“sap-icon://broken-link"
}, {
“titleId”：3，
“姓名”：“托马斯·哈代”，
“产品ID”：“004”，
“ProductPicUrl”：“sap-icon://create"
}, {
“titleId”：4，
“姓名”：“克里斯蒂娜·伯格伦”，
“产品ID”：“005”，
“ProductPicUrl”：“sap-icon://pending"
}, {
“titleId”：5，
“姓名”：“汉娜·穆斯”，
“产品ID”：“006”，
“ProductPicUrl”：“sap-icon://decision"
}, {
“titleId”：6，
“姓名”：“Martín Sommer”，
“ProductId”：“007”，
“ProductPicUrl”：“sap-icon://process"
}, {
"
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
    });