UI5-文档-4.32-Routing with Parameters
现在我们可以在overview和detail页面之间导航,但是我们在overview中选择的实际项目还没有显示在detail页面上。我们的应用程序的一个典型用例是在详细信息页面上显示所选项目的附加信息。
为了完成这项工作,我们必须将选择的项目的信息传递到细节页面,并在那里显示该项目的细节。
Preview
The selected invoice details are now shown in the details page
Coding
You can view and download all files at Walkthrough - Step 32.
webapp/manifest.json
{
"_version": "1.12.0",
…
"sap.ui5": {
…
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.walkthrough.view",
"controlId": "app",
"controlAggregation": "pages",
"async": true
},
"routes": [
{
"pattern": "",
"name": "overview",
"target": "overview"
},
{
"pattern": "detail/{invoicePath}",
"name": "detail",
"target": "detail"
}
],
"targets": {
"overview": {
"viewID": "overview"
"viewName": "Overview"
},
"detail": {
"viewId": "detail"
"viewName": "Detail"
}
}
}
}
}
现在,我们将导航参数invoicePath添加到详细路径,以便将所选项目的信息传递到详细页面。强制导航参数是用大括号定义的。
webapp/view/Detail.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.Detail"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page
title="{i18n>detailPageTitle}">
<ObjectHeader
intro="{invoice>ShipperName}"
title="{invoice>ProductName}"/>
</Page>
</mvc:View>
我们添加一个控制器,它将负责在视图上设置项目的上下文,并将ObjectHeader的一些属性绑定到发票模型的字段。我们可以在这里从invoice对象中添加更详细的信息,但是为了简单起见,我们现在只显示两个字段。
webapp/controller/InvoiceList.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/demo/walkthrough/model/formatter",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
], function (Controller, JSONModel, formatter, Filter, FilterOperator) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.InvoiceList", {
… onPress: function (oEvent) {
var oItem = oEvent.getSource();
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("detail",{
invoicePath: oItem.getBindingContext("invoice").getPath().substr(1)
});
}
});
});
可以通过getSource方法访问与之交互的控件实例,该方法可用于所有SAPUI5事件。它将返回在本例中单击的ObjectListItem。我们将使用它将单击的项目的信息传递到详细页面,以便在那里显示相同的项目。
在navTo方法中,我们现在添加了一个配置对象,用项目的当前信息填充导航参数invoicePath。这将更新URL并同时导航到detail视图。在detail页面上,我们可以再次访问这个上下文信息并显示相应的项目。
为了标识我们所选择的对象,我们通常会在后端系统中使用该项的键,因为它简短且精确。但是,对于我们的发票项目,我们没有一个简单的键,而是直接使用绑定路径来保持示例简短。条目的路径是绑定上下文的一部分,绑定上下文是SAPUI5的一个助手对象,用于管理控件的绑定信息。可以通过在任何绑定的SAPUI5控件上使用模型名调用getBindingContext方法来访问绑定上下文。我们需要通过调用字符串上的.substr(1)从绑定路径中删除第一个/,因为这是url中的一个特殊字符,不允许这样做,我们将在详细信息页面上再次添加它。
webapp/controller/Detail.controller.js (New)
sap.ui.define([
"sap/ui/core/mvc/Controller"
],function(Controller){
"use strict";
returnController.extend("sap.ui.demo.walkthrough.controller.Detail",{
onInit:function(){
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched,this);
},
_onObjectMatched:function(oEvent){
this.getView().bindElement({
path:"/"+ oEvent.getParameter("arguments").invoicePath,
model:"invoice"
});
}
});
});
最后一块拼图是细节控制器。它需要设置我们在视图上传递的带有URL参数invoicePath的上下文,以便实际显示发票列表中选择的项目,否则,视图将保持空。
在控制器的init方法中,我们获取我们的应用程序路由器实例,并通过调用方法attachpatternmatch来附加到详细路由,该方法在我们通过其名称访问的路由上匹配。
在由路由器触发的_onobjectmatch方法中,我们接收到一个事件,可以使用该事件访问URL和导航参数。arguments参数将返回与路由模式中的导航参数相对应的对象。我们访问在发票列表控制器中设置的invoicePath,并在视图中调用bindElement函数来设置上下文。我们必须再次在路径前面添加根/,因为将路径作为URL参数传递而删除了根/。
bindElement函数为SAPUI5控件创建绑定上下文,并接收模型名称和配置对象中项目的路径。这将触发与发票模型字段相连接的UI控件的更新。当您单击发票列表中的项目时,现在应该会在另一个页面上看到发票详细信息。
Conventions
在AppDescriptor中定义路由配置
Parent topic: Walkthrough
Previous: Step 31:
Routing and Navigation
Next: Step 33:
Routing Back and History
Related Information
Tutorial:
Navigation and Routing
API Reference: sap.m.routing.Router
UI5-文档-4.32-Routing with Parameters的更多相关文章
- elasticsearch系列三:索引详解(分词器、文档管理、路由详解(集群))
一.分词器 1. 认识分词器 1.1 Analyzer 分析器 在ES中一个Analyzer 由下面三种组件组合而成: character filter :字符过滤器,对文本进行字符过滤处理,如 ...
- elasticsearch最全详细使用教程:入门、索引管理、映射详解、索引别名、分词器、文档管理、路由、搜索详解
一.快速入门1. 查看集群的健康状况http://localhost:9200/_cat http://localhost:9200/_cat/health?v 说明:v是用来要求在结果中返回表头 状 ...
- hadoop2.6.0汇总:新增功能最新编译 32位、64位安装、源码包、API下载及部署文档
相关内容: hadoop2.5.2汇总:新增功能最新编译 32位.64位安装.源码包.API.eclipse插件下载Hadoop2.5 Eclipse插件制作.连接集群视频.及hadoop-eclip ...
- MFC文档视图中窗口切换 (2012-05-11 18:32:48)
在文档试图应用程序,有时需要在工作区切换试图,以下就是如何切换试图了 .创建要切换的视图类,同时把构造函数,Create函数改变为public .在需要切换试图的动作响应中,加入切换代码,一般是在CM ...
- 【转】刚发现一个linux在线文档库。很好很强大。
原文网址:http://blog.csdn.net/longxibendi/article/details/6048231 1.网址: http://www.mjmwired.net 2.比如查看这个 ...
- Oracle 11g 单实例安装文档
这里介绍在Red Hat Enterprise Linux Server release 5.7 (Tikanga)下安装ORACLE 11.2.0.1.0的过程,本文仅仅是为了写这样安装指导文档而整 ...
- 分析优秀的.NET 文档设计工具Vsdocman 7.1 软件保护技术
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释. 我们知道.NET源代码的注释是Xml格式的注释,在生成程序集时,只需用选中生成Xml注释,Vis ...
- RabbitMq 技术文档
RabbitMq 技术文档 目录 1 AMQP简介 2 AMQP的实现 3 RabbitMQ简介 3.1 概念说明 3.2 消息队列的使用过程 3.3 RabbitMQ的特性 4 RabbitMQ使用 ...
- Rhel6-moosefs分布式存储配置文档
MFS 特性: 1. Free(GPL) 2. 通用文件系统,不需要修改上层应用就可以使用 3. 可以在线扩容,体系架构可伸缩性极强. 4. 部署简单. 5. 高可用,可设置任意的文件冗余程度(提供比 ...
- 使用RAML描述API文档信息的一些用法整理
RAML是Restful API Modeling Language的缩写,是用来描述API信息的文档. 创建一个.raml后缀的文件,用Atom打开. 基本用法 #%RAML 0.8 title: ...
随机推荐
- SELENIUM如何调用FIREFOX时加载插件
当selenium调用firefox时,会发现这个firefox里干净的如同一盆清水,自己定制安装的那些插件都不翼而飞了,这个时候那些插件自然就不能使用了,但是当前又必须使用插件该如何是好呢? 解决办 ...
- JVM(下)
持久代:不会被 gc 给轻易回收的,创建后一直存在,持久代在堆内存里面,但是不归 java 程序使用.持久代是 动态 load 的那些 class,局部变量,去 gc 其实也 gc 不了啥 1.8 之 ...
- nginx 各参数说明
nginx 各参数说明: 参数 所在上下文 含义
- node 知识点
问:局部安装如何使用npm run命令? 答:如果已局部安装了babel-cli(babel-cli自带babel-node命令),package.json文件配置如下: "scripts& ...
- Vue 网络请求
Vue网络请求,用的是vue-resource 1. 首先需要安装vue-resource npm install vue-resource 2. 安装好之后,会在package.json文件中自动加 ...
- 最新hadoop入门教程汇总篇(附详细图文步骤)
关于hadoop的分享此前一直都是零零散散的想到什么就写什么,整体写的比较乱吧.最近可能还算好的吧,毕竟花了两周的时间详细的写完的了hadoop从规划到环境安装配置等全部内容.写过程不是很难,最烦的可 ...
- C/C++基础----IO库
IO对象无拷贝或赋值,通常以引用形式传递. IO库条件状态 strm::iostate 一种机器相关的类型,提供了表达条件状态的完整功能 strm::badbit 用来指出流已经崩溃 strm::fa ...
- bzoj 4929: 第三题
Description 给定n,b,c,d,e以及A0,A1,···,An−1,定义 xk=b×c^4k+d×c^2k+e f(x)=Sigma(Aix^i),0<=i<=n-1 请你求出 ...
- Spring中的后置处理器BeanPostProcessor讲解
Spring中提供了很多PostProcessor供开发者进行拓展,例如:BeanPostProcessor.BeanFactoryPostProcessor.BeanValidationPostPr ...
- Java堆外内存之五:堆外内存管理类ByteBuffer
本篇主要讲解如何使用直接内存(堆外内存),并按照下面的步骤进行说明: 相关背景-->读写操作-->关键属性-->读写实践-->扩展-->参考说明 希望对想使用直接内存的朋 ...