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 的情况下没有使用 idkey,例如:

<tnt:NavigationListItem text="{name}" icon="{icon}" key="{controller}" select="onItemSelect" />

我也尝试过将 id 分配给 tnt:NavigationListItem,然后通过标准 oEvent.getProperty("%MY_ID%") 方法从 oEvent 对象访问它,但没有成功。

我的问题:

  1. 对于 XML-模板中的 UI5 项,我什么时候应该使用 id 以及什么时候使用 key

  2. sap.tnt.NavigationListItemkey 优于 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>