|
按照惯例，更新一波，今天的任务是研究数据的绑定bindingContext以及路由跳转，参数传递以及研究官方提供的控件，个人认为今天的进展不够，虽然跌跌撞撞达成了指标，但是也只是移植了别人的代码，离自己的预期还是有很大一段距离的，废话不多说，开始慢慢讲
先上个文件结构，这次因为更改了代码结构所以我并没有使用i18n文件进行绑定数据，上回提到的侧边导航栏感觉不太好用，也是今天拖累我进度的一个非常重要的因素，官方提示的itemSelect事件貌似所有的标签都能被选择并且触发事件，没办法进行精确定位，文档我有点没看懂，而且官方给的示例中也没有给出事件触发的代码部分，所以我还是建议不要使用的好，容易进坑。
原理
绑定数据源我就不多说了，大多是view层的事情，待会儿给源码，主要是controller层的问题，这边运用到的原理还是有两步，首先，我们点击第一个item时，我们要获取到我们点击列表的序号，从第二张图可以依稀地看到我监听到的是List0-0，这个数字比较微妙，那是不是可以出现x-x这种做法呢？这个之后再议
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
"sap/ui/core/UIComponent",
'sap/m/MessageToast'
], function(jQuery, Controller, UIComponent ,MessageToast) {
"use strict";
Controller.extend("test1.controller.View1", {
onInit: function () {
},
onListPress: function(event) {
var oRouter = UIComponent.getRouterFor(this);
var oItem = event.getSource();
var sPath = oItem.getBindingContext().getPath();
MessageToast.show(oItem);
oRouter.navTo("Page", {
employeePath: encodeURIComponent(sPath)
});
}
});
return Controller;
});
我们一步步看
var oRouter = UIComponent.getRouterFor(this);第一步，获取当前路由
var oItem = event.getSource();通过传入的event参数，获得点击的行
var sPath = oItem.getBindingContext().getPath();最后，获取点击行的路径 (string类型) 。比如，当用户点击第一行，sPath 为 /Suppliers/0。这个路径需要传递到 Page view。
使用 encodeURIComponent() 函数编码，去除/符号
page.controller
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
"sap/ui/core/UIComponent",
"sap/ui/core/routing/History"
], function(jQuery, Controller , UIComponent ,History) {
"use strict";
Controller.extend("test1.controller.Page", {
onInit: function () {
var oRouter = UIComponent.getRouterFor(this);
oRouter.getRoute("Page").attachPatternMatched(this._onObjectMatched, this);
},
onNavPress: function() {
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined){
window.history.go(-1);
}else{
var oRouter = UIComponent.getRouterFor(this);
oRouter.navTo("View1",{}, true);
}
},
_onObjectMatched: function (event) {
var sPath = decodeURIComponent(
event.getParameter("arguments").employeePath);
this.getView().bindElement({path: sPath});
}
});
return Controller;
});
oRouter.getRoute(“detail”).attachPatternMatched(this._onObjectMatched, this);，当模式匹配时，附加事件处理器为 _onObjectMatched。然后在 _onObjectMatched 中获取 Master view 传递的路径并绑定数据。
由于其他配置项都已经在上一篇博客配置过了，包括manifest.json以及component.js，所以这次进度就比较快，多提一句的是，在web ide中生成的项目自带了metadata.xml，这个文件在上一篇博客中并没有讲解，这里要记录一下
...
<EntityType Name="Employees">
<Key>
<PropertyRef Name="Id"/>
</Key>
<Property Name="Id" Nullable="false" Type="Edm.String"/>
<Property Name="name" Nullable="false" Type="Edm.String"/>
<Property Name="field2" Nullable="false" Type="Edm.Decimal"/>
<Property Name="field3" Nullable="false" Type="Edm.String"/>
</EntityType>
...
<EntityContainer Name="DemoSetContainer" m:IsDefaultEntityContainer="true" sap:supported-formats="atom json xlsx">
<EntitySet EntityType="Demo.Entity1" Name="Entity1_Set"/>
<EntitySet EntityType="Demo.Employees" Name="Employees"/>
<EntitySet EntityType="Demo.Entity3" Name="Entity3_Set"/>
</EntityContainer>
在这个文件中，为了让原来配置路径中的json生效，必须要更改metadata.xml中的记录信息，估计这个环境刚生成的时候寻找数据也是通过这个元数据文件为入口进行文件的匹配，同时，json文件中的metadata项也要重新添加
[{
"Id": "1",
"name": "前端工程师",
"field2": 3097.2,
"field3": "field3 1",
"__metadata": {
"uri": "Employees('1')",
"type": "Demo.Employees"
}
},
{
"Id": "2",
"name": "后端工程师",
"field2": 3097.2,
"field3": "field3 1",
"__metadata": {
"uri": "Employees('2')",
"type": "Demo.Employees"
}
}]
还有一个要变动的地方是manifest中的routes项
"routes": [{
"pattern": "",
"name": "View1",
"target": "view1"
},
{
"pattern":"page/{employeePath}",
"name": "Page",
"target": "page"
}
],
pattern配置项后面要多跟一个参数用于传递点击行的数字，用于路由传递的空间一起写进去
总结
说一说今天的收获，虽然在侧边导航栏这个坑爹控件上僵持了很久，但是总归还是在配置齐全的环境中吃到了一点甜头，还是拿vue进行对比，vue在前端页面渲染和对数据的遍历是，普遍采用了v-for，然后在data中简历一个数组，用 xxx in xxx的方式遍历整个数据，而在ui5中的view层，只需要在需要遍历的项目的父容器的属性中，注明需要被遍历的文件名，然后在子容器中的属性直接用{}里面写入想要现实的json项即可，在运行后就可以自动遍历数据并且生成，超方便，前台基本上不用管什么事了，当然这是建立在配了一坨的元数据环境下= =
总而言之，这个框架用的真的心累，太严谨了，而且社区太封闭，基本上有问题没发问，文档全英文，API更是难用= =
官方的控件给的源代码还是比较良心的，但是一些控件有可能就没有考虑这么多，就感觉贼难用，坑啊啊啊啊啊，路漫漫，毕竟是面相企业级的框架，严谨一点也无可厚非，不过照这么走下去写的小的应用的能力还是有的，毕竟最麻烦的跨域问题，数据绑定问题以及路由配置问题，数据连接问题都已经搞定了，接下来就是好好研究一下官方给出的各种API和控件，熟悉一下用法，能学到一个小有所成的境界还是可以短时间内达到的 | 
转播
