从控件中检索 ID 以在导航中使用 [英] Retrieving the id from a control to use in navigation

问题描述

我有一个带有图块的视图，每个图块都有一个 id="foo" 属性和一个指向控制器中函数的 press 属性.

I have a view with tiles, each of which have an id="foo" property, and a press property pointing to a function in the controller.

问题是我可以获取磁贴的 id，但它会自动附加到视图名称 __xmlview1--foo1.如果已经创建了其他视图，这可能会改变；不能保证它总是 xmlview1，它可以是 xmlview2 或任何更高的数字.

The problem is I can get the id of the tile, but it is appended automatically to the view name, __xmlview1--foo1. This can change if other views have already been created; there's no guarantee it will always be xmlview1, it could be xmlview2 or any higher number.

如何检索出现在磁贴的 id 属性中的纯 id?这个 switch 语句是执行导航的最佳方式，还是有更健壮/优雅的解决方案?

How do I retrieve the pure id as it appears in the tile's id property? Is this switch statement the best way to perform navigation, or is there a more robust/elegant solution?

onPress: function(oEvent){
  switch(oEvent.getSource().sId) {
    case "__xmlview1--foo1":
      this.oRouter.navTo("myview1");
      break;
    case "__xmlview1--foo2":
      this.oRouter.navTo("myview2");
      break;
    case "__xmlview1--foo3":
      this.oRouter.navTo("myview3");
      break;
    case "__xmlview1--foo4":
      this.oRouter.navTo("myview4");
      break;
    case "__xmlview1--foo5":
      this.oRouter.navTo("myview5");
      break;
    default:
      console.log("No match found.");
}

推荐答案

请不要尝试重新发明轮子...

UI5，就像许多其他或多或少成熟的框架一样，利用 Router 范式进行导航.

UI5, just like many other more or less mature frameworks, utilize the Router paradigm for navigation.

它给了你更多的自由——你可以使用书签，维护应用程序状态，维护友好，因此你不需要使用丑陋的 switch/if-then-else 语句.

It gives you way more freedom -- you could use bookmarking, maintain application state, is maintenance-friendly, and as such you don't need to use ugly switch / if-then-else statements.

请参阅应用程序最佳实践中对路由机制的出色解释 或查看 这个工作示例.您可以轻松适应与瓷砖一起使用.

See the excellent explanation of the Routing mechanism in the Application Best Practices or have a look at this working example. You could easily adapt for use with tiles.

(如果我要进行代码审查，并且我没有看到用于导航的路由器机制，我会完全删除代码并要求您重新开始)

似乎我被多个开关误导了......我很抱歉！

It seems I was a bit misguided by the multiple switches... my apologies!

我假设您正在根据模型填充图块.那么为什么不将导航目标添加到您的模型中呢?

I'm assuming you are populating your tiles based on a model. So why not add the navigation target to your model?

TileCollection : [
    {
        icon   : "sap-icon://inbox",
        title  : "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        target : "detailView1"
    },
    {
        //etc
    }
]

以及磁贴定义:

<TileContainer id="container" tiles="{/TileCollection}">
    <StandardTile
        icon="{icon}"
        title="{title}"
        press="handlePress" />
</TileContainer>

为所有磁贴提供 press 事件的事件处理程序可以如此简单:

Your event handler which serves the press event for all your tiles can then be as simple as:

handlePress: function(oEvent) {
    var sTarget = oEvent.getSource().getBindingContext().getObject().target;
    this.oRouter.navTo(sTarget);
}

希望这能解释更多！:)

Hope this explains a bit more! :)

这篇关于从控件中检索 ID 以在导航中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！