Question

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

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

如何检索tile的id属性中显示的纯ID？这个switch语句是执行导航的最佳方式，还是有更健壮/更优雅的解决方案？

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.");
}

Answer 1

您可以将格式更改为_xmlviewX--myviewX，然后只需从--子串并导航到该链接。

Answer 2

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

UI5，就像许多其他更成熟或更不成熟的框架一样，利用Router范例进行导航。

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

请参阅Application Best Practices中对路由机制的出色解释，或查看this working example。您可以轻松地适应瓷砖使用。

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

编辑：似乎我被多个开关误导了......我道歉！

我假设你正在根据模型填充你的瓷砖。那么为什么不将导航目标添加到您的模型中呢？

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事件的事件处理程序可以简单如下：

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

希望这可以解释一下！：）

Answer 3

最简单的解决方案是放弃转换并改为使用indexOf/if..else：

var id = oEvent.getSource().sId;

if (id.indexOf('foo1') > -1) {
    this.oRouter.navTo("myview1");
} else if (id.indexOf('foo2') > -1) {
    this.oRouter.navTo("myview2");
} else if (id.indexOf('foo3') > -1) {
    this.oRouter.navTo("myview3");
} else if (id.indexOf('foo4') > -1) {
    this.oRouter.navTo("myview4");
} else if (id.indexOf('foo5') > -1) {
    this.oRouter.navTo("myview5");
} else {
    console.log("No match found.");
}

如果您必须使用switch，则可以使用test

对正确的ID进行正则表达式

onPress: function(oEvent){

    var id = oEvent.getSource().sId;

    switch(true) {
        case /foo1/.test(id):
          this.oRouter.navTo("myview1");
          break;
        case /foo2/.test(id):
          this.oRouter.navTo("myview2");
          break;
        case /foo3/.test(id):
          this.oRouter.navTo("myview3");
          break;
        case /foo4/.test(id):
          this.oRouter.navTo("myview4");
          break;
        case /foo5/.test(id):
          this.oRouter.navTo("myview5");
          break;
        default:
          console.log("No match found.");
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

从控件中检索要在导航中使用的id

3 个答案: