sap.tnt.NavigationListItem 的稳定 ID(id 与密钥)
Stable ID for sap.tnt.NavigationListItem (id vs. key)
根据 Use Stable IDs 文章,建议为 UI5 元素使用稳定的 ID。同时,我审查了 sap.tnt.NavigationListItem
实施的多个示例,我注意到在 sap.tnt.NavigationListItem
的情况下没有使用 id
但 key
,例如:
<tnt:NavigationListItem text="{name}" icon="{icon}" key="{controller}" select="onItemSelect" />
我也尝试过将 id
分配给 tnt:NavigationListItem
,然后通过标准 oEvent.getProperty("%MY_ID%")
方法从 oEvent
对象访问它,但没有成功。
我的问题:
对于 XML-模板中的 UI5 项,我什么时候应该使用 id
以及什么时候使用 key
?
sap.tnt.NavigationListItem
是 key
优于 id
还是我错过了一些重要的事情?
根据大家的意见,我做了一个小例子。
- 如果您的项目是硬编码的,请务必选择
key
XML定义。
- 如果你的物品来自一个模型。你也可以做到的
和其他地方一样。使用数据触发正确的操作。
如果您需要识别 UI 元素,请使用 ID
,例如测试中的按钮,或者如果您添加 User Assistance Help.
sap.ui.controller("view1.initial", {
onInit: function(oEvent) {
this.getView().setModel(
new sap.ui.model.json.JSONModel({
items: [{
title : "1",
subItems: [
{ keyInData: "1", title : "1-a" },
{ keyInData: "2", title : "1-b" },
{ keyInData: "3", title : "1-c" },
{ keyInData: "4", title : "1-d" }
]
}],
}));
},
onItemSelect: function(oEvent) {
const item = oEvent.getParameter("item")
console.log("key over key binding: " + item.getKey() )
console.log("key over databinding: " + item.getBindingContext().getObject().keyInData )
}
});
sap.ui.xmlview("main", { viewContent: jQuery("#view1").html() } ).placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:tnt="sap.tnt">
<tnt:NavigationList
id="navigationList"
width="320px"
selectedKey="subItem3" items="{/items}">
<tnt:NavigationListItem text="{title}" items="{ path:'subItems', templateShareable:false}" icon="sap-icon://employee" >
<tnt:NavigationListItem text="{title} - {keyInData}" key="{keyInData}" select="onItemSelect" />
</tnt:NavigationListItem>
</tnt:NavigationList>
</mvc:View>
</script>
根据 Use Stable IDs 文章,建议为 UI5 元素使用稳定的 ID。同时,我审查了 sap.tnt.NavigationListItem
实施的多个示例,我注意到在 sap.tnt.NavigationListItem
的情况下没有使用 id
但 key
,例如:
<tnt:NavigationListItem text="{name}" icon="{icon}" key="{controller}" select="onItemSelect" />
我也尝试过将 id
分配给 tnt:NavigationListItem
,然后通过标准 oEvent.getProperty("%MY_ID%")
方法从 oEvent
对象访问它,但没有成功。
我的问题:
对于 XML-模板中的 UI5 项,我什么时候应该使用
id
以及什么时候使用key
?sap.tnt.NavigationListItem
是key
优于id
还是我错过了一些重要的事情?
根据大家的意见,我做了一个小例子。
- 如果您的项目是硬编码的,请务必选择
key
XML定义。 - 如果你的物品来自一个模型。你也可以做到的 和其他地方一样。使用数据触发正确的操作。
如果您需要识别 UI 元素,请使用 ID
,例如测试中的按钮,或者如果您添加 User Assistance Help.
sap.ui.controller("view1.initial", {
onInit: function(oEvent) {
this.getView().setModel(
new sap.ui.model.json.JSONModel({
items: [{
title : "1",
subItems: [
{ keyInData: "1", title : "1-a" },
{ keyInData: "2", title : "1-b" },
{ keyInData: "3", title : "1-c" },
{ keyInData: "4", title : "1-d" }
]
}],
}));
},
onItemSelect: function(oEvent) {
const item = oEvent.getParameter("item")
console.log("key over key binding: " + item.getKey() )
console.log("key over databinding: " + item.getBindingContext().getObject().keyInData )
}
});
sap.ui.xmlview("main", { viewContent: jQuery("#view1").html() } ).placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:tnt="sap.tnt">
<tnt:NavigationList
id="navigationList"
width="320px"
selectedKey="subItem3" items="{/items}">
<tnt:NavigationListItem text="{title}" items="{ path:'subItems', templateShareable:false}" icon="sap-icon://employee" >
<tnt:NavigationListItem text="{title} - {keyInData}" key="{keyInData}" select="onItemSelect" />
</tnt:NavigationListItem>
</tnt:NavigationList>
</mvc:View>
</script>