导航与路由10-17(渣翻完结)

Step 10: Implement “Lazy Loading”

通过避免加载不可见的资源来提高浏览器的反映速度，我们称这种方式为延迟加载(lazy loading)。

修改Resume.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.employee.Resume"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page
        title="{i18n>ResumeOf} {FirstName} {LastName}"
        id="employeeResumePage"
        showNavButton="true"
        navButtonPress=".onNavBack">
        <content>
            <IconTabBar
                id="iconTabBar"
                headerBackgroundDesign="Transparent"
                class="sapUiResponsiveContentPadding"
                binding="{Resume}"
                select=".onTabSelect"
                selectedKey="{view>/selectedTabKey}">
                <items>
                    <IconTabFilter id="infoTab" text="{i18n>tabInfo}" key="Info">
                        <Text text="{Information}"/>
                    </IconTabFilter>
                    <IconTabFilter id="projectsTab" text="{i18n>Projects}" key="Projects">
                        <mvc:XMLView viewName="sap.ui.demo.nav.view.employee.ResumeProjects"></mvc:XMLView>
                    </IconTabFilter>
                    <IconTabFilter id="hobbiesTab" text="{i18n>Hobbies}" key="Hobbies">
                        <!-- place content via lazy loading -->
                    </IconTabFilter>
                    <IconTabFilter id="notesTab" text="{i18n>Notes}" key="Notes">
                        <!-- place content via lazy loading -->
                    </IconTabFilter>
                </items>
            </IconTabBar>
        </content>
    </Page>
</mvc:View>

为了说明临时加载，我们实现了只有当用户在IconTabBar: Hobbies和Notes中为两个tag选择相应的tab时才加载内容。为每个IconTabFilter都是设置了一个id，以便在之后的路由配置他们。

在resume view中，我们删除了Hobbies和Notes tab的内容，之后我们将用导航特性动态填充它们。

创建ResumeHobbies.view.xml

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
    <Text text="{Hobbies}"/>
</mvc:View>

创建ResumeNotes.view.xml

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
    <Text text="{Notes}"/>
</mvc:View>

修改Resume.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController",
    "sap/ui/model/json/JSONModel"
], function (BaseController, JSONModel) {
    "use strict";
    var _aValidTabKeys = ["Info", "Projects", "Hobbies", "Notes"];
    return BaseController.extend("sap.ui.demo.nav.controller.employee.Resume", {
        ...
        _onRouteMatched : function (oEvent) {
            var oArgs, oView, oQuery;
            oArgs = oEvent.getParameter("arguments");
            oView = this.getView();
            oView.bindElement({
                ...
            });
            oQuery = oArgs["?query"];
            if (oQuery && _aValidTabKeys.indexOf(oQuery.tab) > -1){
                oView.getModel("view").setProperty("/selectedTabKey", oQuery.tab);
                // support lazy loading for the hobbies and notes tab
                if (oQuery.tab === "Hobbies" || oQuery.tab === "Notes"){
                    // the target is either "resumeTabHobbies" or "resumeTabNotes"
                    this.getRouter().getTargets().display("resumeTab" + oQuery.tab);
                }

            } else {
                // the default query param should be visible at all time
                this.getRouter().navTo("employeeResume", {
                    employeeId : oArgs.employeeId,
                    query: {
                        tab : _aValidTabKeys[0]
                    }
                },true /*no history*/);
            }
        },
        ...
    });
});

当所选择的tab是Hobbies或Notes的时候，我们通过路由去寻找相应的target，并将他显示在页面。当选择的tab不是Hobbies或Notes时，不会触发路由，所以不用读取页面不会被显示的资源。

这里有效的target是resumeTabHobbies和resumeTabNotes，我们需要在路由中追加这两个target。

修改manifest.json

{
    "_version": "1.12.0",
    "sap.app": {
        ...
    },
    "sap.ui": {
        ...
    },
    "sap.ui5": {
        ...
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "sap.ui.demo.nav.view",
                "controlId": "app",
                "controlAggregation": "pages",
                "transition": "slide",
                "bypassed": {
                    "target": "notFound"
                }
            },
            "routes": [{
                ...
            }, {
                "pattern": "employees/{employeeId}/resume:?query:",
                "name": "employeeResume",
                "target": "employeeResume"
            }],
            "targets": {
                ...
                "employeeResume": {
                    "viewId": "resume",
                    "viewName": "employee.Resume",
                    "viewLevel" : 4,
                    "transition": "flip"
                },
                "resumeTabHobbies": {
                    "viewId": "resumeHobbies",
                    "parent": "employeeResume",
                    "viewPath": "sap.ui.demo.nav.view.employee",
                    "viewName": "ResumeHobbies",
                    "controlId": "hobbiesTab",
                    "controlAggregation": "content"
                },
                "resumeTabNotes": {
                    "viewId": "resumeNotes",
                    "parent": "employeeResume",
                    "viewPath": "sap.ui.demo.nav.view.employee",
                    "viewName": "ResumeNotes",
                    "controlId": "notesTab",
                    "controlAggregation": "content"
                }
            }
        }
    }
}

添加了两个target，resumeTabHobbies和resumeTabNotes，其中的配置信息会覆盖默认的config中的配置信息。

target resumeTabHobbies的parent属性为employeeResume。parent的属性值，是另外一个target值，在这个例子中，确保在resumeTabHobbies显示之前，employeeResume会被加载。这可以看作是一个视图之间的依赖。

通过设置controlId和controlAggregation属性，路由器将视图ResumeHobbies放入ID hobbiesTab的IconTabFilter控件的Aggregation中。

每个target，只能定义一个parent。controlId属性设置为parent view的contriol，这里的parent view 特指target中设置的view。

这样我们就实现了延迟加载，只在第一次被点击的时候进行加载。

Step 11: Assign Multiple Targets

使用一个路由的多个目标，按下按钮会，打开一个包含两个部分的新页面。

修改Home.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.Home"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>homePageTitle}" class="sapUiResponsiveContentPadding">
        <content>
            <Button id="displayNotFoundBtn" text="{i18n>DisplayNotFound}" press=".onDisplayNotFound" class="sapUiTinyMarginEnd"/>
            <Button id="employeeListBtn" text="{i18n>ShowEmployeeList}" press=".onNavToEmployees" class="sapUiTinyMarginEnd"/>
            <Button id="employeeOverviewBtn" text="{i18n>ShowEmployeeOverview}" press=".onNavToEmployeeOverview" class="sapUiTinyMarginEnd"/>

        </content>
    </Page>
</mvc:View>

添加一个新的按钮，当按钮被点击时，触发onNavToEmployeeOverview。

修改Home.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
    "use strict";
    return BaseController.extend("sap.ui.demo.nav.controller.Home", {
        ...
        onNavToEmployees : function () {
            this.getRouter().navTo("employeeList");
        },
        onNavToEmployeeOverview : function ()  {
            this.getRouter().navTo("employeeOverview");
        }

    });
});

修改manifest.json

{
    "_version": "1.12.0",
    "sap.app": {
        ...
    },
    "sap.ui": {
        ...
    },
    "sap.ui5": {
        ...
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "sap.ui.demo.nav.view",
                "controlId": "app",
                "controlAggregation": "pages",
                "transition": "slide",
                "bypassed": {
                    "target": "notFound"
                }
            },
            "routes": [{
                "pattern": "",
                "name": "appHome",
                "target": "home"
            }, {
                "pattern": "employees",
                "name": "employeeList",
                "target": "employees"
            }, {
                "pattern": "employees/overview",
                "name": "employeeOverview",
                "target": ["employeeOverviewTop", "employeeOverviewContent"]
            }, {
                "pattern": "employees/{employeeId}",
                "name": "employee",
                "target": "employee"
            }, {
                "pattern": "employees/{employeeId}/resume:?query:",
                "name": "employeeResume",
                "target": "employeeResume"
            }],
            "targets": {
                ...
                "resumeTabNotes": {
                    "viewId": "resumeNotes",
                    "parent": "employeeResume",
                    "viewPath": "sap.ui.demo.nav.view.employee",
                    "viewName": "ResumeNotes",
                    "controlId": "notesTab",
                    "controlAggregation": "content"
                },
                "employeeOverview": {
                    "viewId": "employeeOverview",
                    "viewPath": "sap.ui.demo.nav.view.employee.overview",
                    "viewName": "EmployeeOverview",
                    "viewLevel" : 2
                },
                "employeeOverviewTop": {
                    "viewId": "employeeOverviewTop",
                    "parent": "employeeOverview",
                    "viewPath": "sap.ui.demo.nav.view.employee.overview",
                    "viewName": "EmployeeOverviewTop",
                    "controlId": "EmployeeOverviewParent",
                    "controlAggregation": "content"
                },
                "employeeOverviewContent": {
                    "viewId": "employeeOverviewContent",
                    "parent": "employeeOverview",
                    "viewPath": "sap.ui.demo.nav.view.employee.overview",
                    "viewName": "EmployeeOverviewContent",
                    "controlId": "EmployeeOverviewParent",
                    "controlAggregation": "content"
                }

            }
        }
    }
}

添加了新的路由employeeOverview，使用数组同时引用两个target:employeeOverviewTop和employeeOverviewContent。

target employeeOverviewTop和employeeOverviewContent都将target employeeOverview作为parent 引用，因为我们希望将它们都放在parent中。我们还设置了viewPath。

路由器确保在匹配了相应的路由并显示了目标时，除了目标视图外，还加载了父视图。

新建EmployeeOverview.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.employee.overview.EmployeeOverview"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page id="EmployeeOverviewParent" title="{i18n>EmployeeOverview}"
        showNavButton="true"
        navButtonPress=".onNavBack"
        class="sapUiResponsiveContentPadding">
        <content>
            <!-- inserted by routing -->
        </content>
    </Page>
</mvc:View>

新建EmployeeOverview.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
    "use strict";
    return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverview", {
    });
});

新建EmployeeOverviewTop.view.xml

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" class="sapUiMediumMarginBottom">
    <Title text="{i18n>EmployeeOverviewTop}"/>
</mvc:View>

新建EmployeeOverviewContent.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Table id="employeesTable"
        items="{/Employees}">
        <headerToolbar>
            <Toolbar>
                <Title text="{i18n>Employees}" level="H2"/>
                <ToolbarSpacer />
                <SearchField id="searchField" search=".onSearchEmployeesTable" width="50%"/>
                <Button icon="sap-icon://sort" press=".onSortButtonPressed"/>
            </Toolbar>
        </headerToolbar>
        <columns>
            <Column id="employeeIDCol"><Text text="{i18n>EmployeeID}"/></Column>
            <Column id="firstNameCol" demandPopin="true"><Text text="{i18n>FirstName}"/></Column>
            <Column id="lastNameCol" demandPopin="true"><Text text="{i18n>LastName}"/></Column>
            <Column id="addressCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>Address}"/></Column>
            <Column id="cityCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>City}"/></Column>
            <Column id="regionCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>Region}"/></Column>
            <Column id="postalCodeCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>PostalCode}"/></Column>
            <Column id="countryCol" minScreenWidth="Tablet" demandPopin="true"><Text text="{i18n>Country}"/></Column>
            <Column id="homePhoneCol" minScreenWidth="Tablet" demandPopin="true" hAlign="Right"><Text text="{i18n>Phone}"/></Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <Text text="{EmployeeID}"/>
                    <Text text="{FirstName}"/>
                    <Text text="{LastName}"/>
                    <Text text="{Address}"/>
                    <Text text="{City}"/>
                    <Text text="{Region}"/>
                    <Text text="{PostalCode}"/>
                    <Text text="{Country}"/>
                    <Text text="{HomePhone}"/>
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</mvc:View>

SearchField允许在表中搜索，Button可以打开一个对话框调整顺序。

新建EmployeeOverviewContent.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/Sorter",
    "sap/m/ViewSettingsDialog",
    "sap/m/ViewSettingsItem"
], function(
    BaseController,
    Filter,
    FilterOperator,
    Sorter,
    ViewSettingsDialog,
    ViewSettingsItem
) {
    "use strict";

    return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent", {

        onInit: function () {
            this._oTable = this.byId("employeesTable");
            this._oVSD = null;
            this._sSortField = null;
            this._bSortDescending = false;
            this._aValidSortFields = ["EmployeeID", "FirstName", "LastName"];
            this._sSearchQuery = null;

            this._initViewSettingsDialog();
        },

        onSortButtonPressed : function () {
            this._oVSD.open();
        },

        onSearchEmployeesTable : function (oEvent) {
            this._applySearchFilter( oEvent.getSource().getValue() );
        },

        _initViewSettingsDialog : function () {
            this._oVSD = new ViewSettingsDialog("vsd", {
                confirm: function (oEvent) {
                    var oSortItem = oEvent.getParameter("sortItem");
                    this._applySorter(oSortItem.getKey(), oEvent.getParameter("sortDescending"));
                }.bind(this)
            });

            // init sorting (with simple sorters as custom data for all fields)
            this._oVSD.addSortItem(new ViewSettingsItem({
                key: "EmployeeID",
                text: "Employee ID",
                selected: true            // by default the MockData is sorted by EmployeeID
            }));

            this._oVSD.addSortItem(new ViewSettingsItem({
                key: "FirstName",
                text: "First Name",
                selected: false
            }));

            this._oVSD.addSortItem(new ViewSettingsItem({
                key: "LastName",
                text: "Last Name",
                selected: false
            }));
        },

        _applySearchFilter : function (sSearchQuery) {
            var aFilters, oFilter, oBinding;

            // first check if we already have this search value
            if (this._sSearchQuery === sSearchQuery) {
                return;
            }
            this._sSearchQuery = sSearchQuery;
            this.byId("searchField").setValue(sSearchQuery);

            // add filters for search
            aFilters = [];
            if (sSearchQuery && sSearchQuery.length > 0) {
                aFilters.push(new Filter("FirstName", FilterOperator.Contains, sSearchQuery));
                aFilters.push(new Filter("LastName", FilterOperator.Contains, sSearchQuery));
                oFilter = new Filter({ filters: aFilters, and: false });  // OR filter
            } else {
                oFilter = null;
            }

            // update list binding
            oBinding = this._oTable.getBinding("items");
            oBinding.filter(oFilter, "Application");
        },

        /**
         * Applies sorting on our table control.
         * @param {string} sSortField        the name of the field used for sorting
         * @param {string} sortDescending    true or false as a string or boolean value to specify a descending sorting
         * @private
         */
        _applySorter : function (sSortField, sortDescending){
            var bSortDescending, oBinding, oSorter;

            // only continue if we have a valid sort field
            if (sSortField && this._aValidSortFields.indexOf(sSortField) > -1) {

                // convert  the sort order to a boolean value
                if (typeof sortDescending === "string") {
                    bSortDescending = sortDescending === "true";
                } else if (typeof sortDescending === "boolean") {
                    bSortDescending =  sortDescending;
                } else {
                    bSortDescending = false;
                }

                // sort only if the sorter has changed
                if (this._sSortField && this._sSortField === sSortField && this._bSortDescending === bSortDescending) {
                    return;
                }

                this._sSortField = sSortField;
                this._bSortDescending = bSortDescending;
                oSorter = new Sorter(sSortField, bSortDescending);

                // sync with View Settings Dialog
                this._syncViewSettingsDialogSorter(sSortField, bSortDescending);

                oBinding = this._oTable.getBinding("items");
                oBinding.sort(oSorter);
            }
        },

        _syncViewSettingsDialogSorter : function (sSortField, bSortDescending) {
            // the possible keys are: "EmployeeID" | "FirstName" | "LastName"
            // Note: no input validation is implemented here
            this._oVSD.setSelectedSortItem(sSortField);
            this._oVSD.setSortDescending(bSortDescending);
        }

    });

});

修改i18n.properties

EmployeeOverview=Employee Overview
ShowEmployeeOverview=Show Employee Overview

EmployeeOverviewTop=Employee Overview Top

Region=Region
EmployeeID=Employee ID
Phone=Phone
Employees=Employees

Step 12: Make a Search Bookmarkable

在url中加入书签标记

修改manifest.json

{
    "_version": "1.12.0",
    "sap.app": {
        ...
    },
    "sap.ui": {
        ...
    },
    "sap.ui5": {
        ...
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "sap.ui.demo.nav.view",
                "controlId": "app",
                "controlAggregation": "pages",
                "transition": "slide",
                "bypassed": {
                    "target": "notFound"
                }
            },
            "routes": [{
                "pattern": "",
                "name": "appHome",
                "target": "home"
            }, {
                "pattern": "employees",
                "name": "employeeList",
                "target": "employees"
            }, {
                "pattern": "employees/overview:?query:",
                "name": "employeeOverview",
                "target": ["employeeOverviewTop", "employeeOverviewContent"]

            }, {
                "pattern": "employees/{employeeId}",
                "name": "employee",
                "target": "employee"
            }, {
                "pattern": "employees/{employeeId}/resume:?query:",
                "name": "employeeResume",
                "target": "employeeResume"
            }],
            "targets": {
                ...
            }
        }
    }
}

为了使搜索的内容可以标记，应该考虑相应的路由pattern如果记载搜索的内容。所以使用/#/employees/overview?search=mySearchQueryString这种格式来标记搜索的内容。追加一个:?query:参数到路由employeeOverview。

要用search作为搜索内容的标记。

修改EmployeeOverviewContent.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/Sorter",
    "sap/m/ViewSettingsDialog",
    "sap/m/ViewSettingsItem"
], function(
    BaseController,
    Filter,
    FilterOperator,
    Sorter,
    ViewSettingsDialog,
    ViewSettingsItem
) {
    "use strict";

    return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent", {

        onInit: function () {
            var oRouter = this.getRouter();

            this._oTable = this.byId("employeesTable");
            this._oVSD = null;
            this._sSortField = null;
            this._bSortDescending = false;
            this._aValidSortFields = ["EmployeeID", "FirstName", "LastName"];
            this._sSearchQuery = null;
            this._oRouterArgs = null;


            this._initViewSettingsDialog();

            // make the search bookmarkable
            oRouter.getRoute("employeeOverview").attachMatched(this._onRouteMatched, this);

        },

        _onRouteMatched : function (oEvent) {
            // save the current query state
            this._oRouterArgs = oEvent.getParameter("arguments");
            this._oRouterArgs.query = this._oRouterArgs["?query"] || {};

            if (this._oRouterArgs.query) {

                // search/filter via URL hash
                this._applySearchFilter(this._oRouterArgs.query.search);

            }
        },


        onSortButtonPressed : function (oEvent) {
            this._oVSD.open();
        },

        onSearchEmployeesTable : function (oEvent) {
            var oRouter = this.getRouter();
            // update the hash with the current search term
            this._oRouterArgs.query.search = oEvent.getSource().getValue();
            oRouter.navTo("employeeOverview",this._oRouterArgs, true /*no history*/);
        },
        ...
    });
});

在controller中处理路由中的查询参数。

在onInit函数中，监听路由，如果路由为employeeOverview，则触发事件_onRouteMatched。通过接收到的event，获取到路由的参数。在获取到的参数中，会包含一个?query属性，该属性会定义指向的搜索内容。

如果有该属性，那么将其保存到 this._oRouterArgs.query中，否则设置为空。如果query上有search的内容，那么将调用this._applySearchFilter(this._oRouterArgs.query.search)来进行查询。

在onSearchEmployeesTable函数中取得在检索框中输入的内容，并且放入路由的参数中，用于在之后的页面中进行传递。

Step 13: Make Table Sorting Bookmarkable

在url中标记表的排序状态

修改EmployeeOverviewContent.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/Sorter",
    "sap/m/ViewSettingsDialog",
    "sap/m/ViewSettingsItem"
], function(
    BaseController,
    Filter,
    FilterOperator,
    Sorter,
    ViewSettingsDialog,
    ViewSettingsItem
) {
    "use strict";
    return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent", {
        onInit: function () {
            ...
        },
        _onRouteMatched : function (oEvent) {
            // save the current query state
            this._oRouterArgs = oEvent.getParameter("arguments");
            this._oRouterArgs.query = this._oRouterArgs["?query"] || {};
            delete this._oRouterArgs["?query"];
            if (this._oRouterArgs.query) {
                // search/filter via URL hash
                this._applySearchFilter(this._oRouterArgs.query.search);
                // sorting via URL hash
                this._applySorter(this._oRouterArgs.query.sortField, this._oRouterArgs.query.sortDescending);
            }
        },
        ...
        _initViewSettingsDialog : function () {
            var oRouter = this.getRouter();
            this._oVSD = new sap.m.ViewSettingsDialog("vsd", {
                confirm: function (oEvent) {
                    var oSortItem = oEvent.getParameter("sortItem");
　　　　　　　　　　　　var oRouter = this.getRouter();
                    this._oRouterArgs.query.sortField = oSortItem.getKey();
                    this._oRouterArgs.query.sortDescending = oEvent.getParameter("sortDescending");
                    oRouter.navTo("employeeOverview",this._oRouterArgs, true /*without history*/);
                }.bind(this) 
            });
            ...
        },
        ...
    });
});

与step12类似，在query中追加了两个参数，sortField与sortDescending。在_onRouteMatched函数中，从url中获取这两个参数。用来进行下一步的处理。

在_initViewSettingsDialog函数中，当confirm方法触发时，获取参数，并将参数放入路由中。

Step 14: Make Dialogs Bookmarkable

记录对话框是否表示的状态，与step12，13类似。

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/Sorter",
    "sap/m/ViewSettingsDialog",
    "sap/m/ViewSettingsItem"
], function(
    BaseController,
    Filter,
    FilterOperator,
    Sorter,
    ViewSettingsDialog,
    ViewSettingsItem
) {
    "use strict";
    return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent", {
        onInit: function () {
            ...
        },
        _onRouteMatched : function (oEvent) {
            // save the current query state
            this._oRouterArgs = oEvent.getParameter("arguments");
            this._oRouterArgs.query = this._oRouterArgs["?query"] || {};
            delete this._oRouterArgs["?query"];
            if (this._oRouterArgs.query) {
                // search/filter via URL hash
                this._applySearchFilter(this._oRouterArgs.query.search);
                // sorting via URL hash
                this._applySorter(this._oRouterArgs.query.sortField, this._oRouterArgs.query.sortDescending);
                // show dialog via URL hash
                if (!!this._oRouterArgs.query.showDialog) {
                    this._oVSD.open();
                }
            }
        },
        onSortButtonPressed : function (oEvent) {
            var oRouter = this.getRouter();
            this._oRouterArgs.query.showDialog = 1;
            oRouter.navTo("employeeOverview",this._oRouterArgs);
        },
        ...
        _initViewSettingsDialog : function () {
            var oRouter = this.getRouter();
            this._oVSD = new sap.m.ViewSettingsDialog("vsd", {
                confirm: function (oEvent) {
                    var oSortItem = oEvent.getParameter("sortItem");
                    this._oRouterArgs.query.sortField = oSortItem.getKey();
                    this._oRouterArgs.query.sortDescending = oEvent.getParameter("sortDescending");
                    delete this._oRouterArgs.query.showDialog;
                    oRouter.navTo("employeeOverview",this._oRouterArgs, true /*without history*/);
                }.bind(this),
                cancel : function (oEvent){
                    delete this._oRouterArgs.query.showDialog;
                    oRouter.navTo("employeeOverview",this._oRouterArgs, true /*without history*/);
                }.bind(this)
            });
            ...
        },
        ...
    });
});

Step 15: Reuse an Existing Route

使用已经存在的导航。

修改EmployeeOverviewContent.view.xml

<mvc:View
    controllerName="sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Table id="employeesTable"
        items="{/Employees}"
        itemPress=".onItemPressed">
        <headerToolbar>
            ...
        </headerToolbar>
        <columns>
            ...
        </columns>
        <items>
            <ColumnListItem type="Active">
                <cells>
                    ...
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</mvc:View>

为itemPress注册一个onItemPressed事件，并且将Item的type设置为Active，这样就可以对item进行点击。

修改EmployeeOverviewContent.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/Sorter",
    "sap/m/ViewSettingsDialog",
    "sap/m/ViewSettingsItem"
], function(
    BaseController,
    Filter,
    FilterOperator,
    Sorter,
    ViewSettingsDialog,
    ViewSettingsItem
) {
    "use strict";
    return BaseController.extend("sap.ui.demo.nav.controller.employee.overview.EmployeeOverviewContent", {
        ...
        _syncViewSettingsDialogSorter : function (sSortField, bSortDescending) {
            // the possible keys are: "EmployeeID" | "FirstName" | "LastName"
            // Note: no input validation is implemented here
            this._oVSD.setSelectedSortItem(sSortField);
            this._oVSD.setSortDescending(bSortDescending);
        },
        onItemPressed : function (oEvent) {
            var oItem, oCtx, oRouter;
            oItem = oEvent.getParameter("listItem");
            oCtx = oItem.getBindingContext();
            this.getRouter().navTo("employeeResume",{
                employeeId : oCtx.getProperty("EmployeeID"),
                query : {
                    tab : "Info"
                }
            });
        }
    });
});

在controller中添加onItemPressed函数，当item被点击时，可以触发该事件。

这样就可以导航到路由employeeResume中。

Step 16: Handle Invalid Hashes by Listening to Bypassed Events

使用Bypassed事件，来监听无效的hash值。

修改App.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sap.ui.demo.nav.controller.App", {

        onInit: function () {
            // This is ONLY for being used within the tutorial.
            // The default log level of the current running environment may be higher than INFO,
            // in order to see the debug info in the console, the log level needs to be explicitly
            // set to INFO here.
            // But for application development, the log level doesn't need to be set again in the code.
            Log.setLevel(Log.Level.INFO);

            var oRouter = this.getRouter();

            oRouter.attachBypassed(function (oEvent) {
                var sHash = oEvent.getParameter("hash");
                // do something here, i.e. send logging data to the backend for analysis
                // telling what resource the user tried to access...
                Log.info("Sorry, but the hash '" + sHash + "' is invalid.", "The resource was not found.");
            });
        }

    });

});

当路由中的hash值无效时，可以触发该事件。可以用来分析为何发生这种问题。

Step 17: Listen to Matched Events of Any Route

使用attachRouteMatched函数来监听所有的路由时间，用于进行分析路由被触发的频率等信息。

修改App.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
    "use strict";
    return BaseController.extend("sap.ui.demo.nav.controller.App", {
        onInit: function () {
            var oRouter = this.getRouter();
            oRouter.attachBypassed(function (oEvent) {
                var sHash = oEvent.getParameter("hash");
                // do something here, i.e. send logging data to the back end for analysis
                // telling what resource the user tried to access...
                jQuery.sap.log.info("Sorry, but the hash '" + sHash + "' is invalid.", "The resource was not found.");
            });
            oRouter.attachRouteMatched(function (oEvent){
                var sRouteName = oEvent.getParameter("name");
                // do something, i.e. send usage statistics to back end
                // in order to improve our app and the user experience (Build-Measure-Learn cycle)
                jQuery.sap.log.info("User accessed route " + sRouteName + ", timestamp = " + new Date().getTime());
            });
        }
    });
});

link https://sapui5.hana.ondemand.com/#/topic/1b6dcd39a6a74f528b27ddb22f15af0d