将MVC应用于SAPUI5应用程序

时间:2014-03-30 23:51:14

标签: sapui5

所以基本上我在SAPUI5中有一个Split页面,并且附加了很少的母版页和详细页面。在一个javascript文件中完成整个操作我没有问题,但由于文件太大而且难以阅读,我想将MVC设计应用于此应用程序并将每个页面分成一个视图和控制文件。这是我的例子:

var oSplitApp = new sap.m.SplitApp({

    masterPages : [ page1, page4, page5],
    detailPages : [ page0, page2, page3 ],
    initialMaster : "page1",
    initialDetail : "page0"
});

和页面如下:

var page0 = new sap.m.Page("initialPage", {});
var page1 = new sap.m.Page({
    enableScrolling : true,
    footer : new sap.m.Bar({
        id : 'page1_footer',
        contentMiddle : [ new sap.m.Button({
            text: "Add"
        })]
    }),
    content : [ oTable = new sap.m.Table("items", {
        inset : true,
        visible : true,
        getIncludeItemInSelection : true,
        showNoData : false,
        columns : [ new sap.m.Column({
            styleClass : "name",
            hAlign : "Left",
            header : new sap.m.Label({
                text : "something"
            })
        }) ]
    }) ]
});
var template = new sap.m.ColumnListItem({
    type : "Navigation",
    visible : true,
    selected : true,
    cells : [ new sap.m.Label({
        text : "{name}"
    }) ]
});

依旧...... 并且每个页面都有on attachPress功能,所以当你点击按钮或链接时会发生一些事情并且其他一些页面会启动。请详细告诉我如何操作?

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

您可以通过为每个主/细节创建自己的视图/控制器来完成此操作。在您的oSplitApp构建的视图中,您可以像这样实例化您的主/详细信息视图:

// load your external view/controller:
var page1 = sap.ui.jsview("path-to.DetailView1");

var oSplitApp = new sap.m.SplitApp({
    masterPages : [ page1, page4, page5],
    detailPages : [ page1, page2, page3 ],
    initialMaster : "page1",
    initialDetail : "page0"
});

例如,您的外部视图文件可能会返回sap.m.Page中的createContent对象。

希望这会对你有所帮助。如果您对此有更多疑问,请告诉我。