如何处理sap.m.Table的itemPress？

Question

我写了一个XML视图。里面有一张桌子：

<Table xmlns="sap.m"
  id="myTable"
  select=""
  selectionChange=""
  swipe=""
  growingStarted=""
  growingFinished=""
  updateStarted=""
  updateFinished=""
  itemPress="console.log('clicked on item')"
>
  <columns>
    <!-- sap.m.Column -->
  </columns>
  <items>
    <!-- sap.m.ListItemBase -->
  </items>
</Table>

我使用控制器的onInit将行插入表中，但是当我单击某行时，该消息不会显示。

如果我在控制器内使用console.log(tablePippo.getProperty("itemPress"));，它会抛出

未捕获错误：元素sap.m.Table中没有属性“itemPress”#tableDetail - myTable

Answer 1

这似乎是人们在使用sap.m.ListBase相关控件时经常遇到的问题。让我概述一下如何管理事件（特别是激活它们）：

混淆可能与从sap.m.ListMode继承的控制的sap.m.ListBase和从sap.m.ListType继承的sap.m.ListItemBase项目有关。

我们假设以下示例列表：

<List
  selectionChange=".onSelectionChange"
  itemPress=".onItemPress"
  delete=".onDelete"
>
  <items>
    <ObjectListItem
      title="Hello ListItem"
      press=".onObjectListItemPress"
    />
  </items>
</List>

sap.m.ListMode (Sample)

如果你正在使用sap.m.List或sap.m.Table，事件发射取决于你正在使用的mode。不幸的是，没有mode属性的List / Table不会触发任何事件！如果希望List / Table触发这些事件，则必须为其分配一个模式。例如：

<List
  mode="SingleSelect"
  ...
>

这些是来自sap.m.ListMode documentation的可能模式：

None (default)

由于没有分配mode属性，因此不会触发任何事件！

SingleSelect | SingleSelectLeft

使用mode="SingleSelect"的列表控件在每个项目的右侧显示一个单选按钮，并在用户单击给定的单选按钮控件时立即触发onSelectionChange事件。使用"SingleSelectLeft"只需将单选按钮移动到项目的左侧。

SingleSelectMaster

使用mode="SingleSelectMaster"的列表控件将显示鼠标悬停时的手，并在单击项目时触发onSelectionChange。

MultiSelect

mode="MultiSelect"中的列表控件提供了一个复选框，并在每次检查时取消onSelectionChange事件并取消选中项目。

Delete

使用mode="Delete"中的列表为您提供一个很好的删除按钮并激发onDelete。

---

sap.m.ListType (Sample)

还有一个属性你应该看看：你的物品的type属性。

每个项都继承自sap.m.ListItemBase，因此有一个名为type的属性。让我们看看它的样子：

<items>
  <ObjectListItem
    type="Active"
    press=".onObjectListItemPress"
    detailPress=".onDetailPress"
    ...
  />
</items>

sap.m.ListMode documentation中列出了以下类型：

Active

根据mode，可以触发列表的itemPress和列表项的press。所选项目会突出显示，以便用户可以看到所选内容。

Detail

提供了一个细节按钮（带有图标sap-icon://edit），可以触发detailPress事件。

DetailAndActive

顾名思义，这是Detail和Active类型的组合。因此，您可以在按钮单击时触发detailPress的详细信息按钮，并且项目本身会触发列表事件itemPress。

Navigation

这些项目具有类似导航的外观，并且调用itemPress和项目的press。

Inactive

从项目本身调用没有项目事件。

---

现在让我们来看看你的问题。您应该为表控件分配mode或为您的项目分配type。在那次改变之后，事件应该被解雇。

一般来说，我会避免同时使用ListMode和ListType，因为可能会出现意外行为，但请自行检查。

Answer 2

将type =“Active”添加到ColumnListItem

...
<items>
    <ColumnListItem type="Active">
        <cells>
            <Text text="{Name}"/>
        </cells>
    </ColumnListItem>
</items>
...

杨旺：https://scn.sap.com/thread/3697995

Answer 3

在控制器中为XML视图定义myItemPress成员函数并将其引用为

itemPress = "myItemPress"

See example

Answer 4

使用sap.m.CustomListItem的简单解决方案

使用设置ListItem的属性

type =“Active”press =“listPress”

<List items="{/results}"> 
<items>
<CustomListItem type="Active" press="listPress">
<content>
<VBox>
    <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Start">
        <items>
            <Text text="{PernrName}" />
            <Text textDirection="RTL" text="{Document Status}" class='subtext'/>
        </items>
    </FlexBox>
    <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="End">
        <items>
            <Text text="{Date}" class='subtext'/>
            <Text textDirection="RTL" text="{Current Processor}" class='subtext'/>
        </items>
    </FlexBox>
</VBox> 
</content>
</CustomListItem>

Answer 5

OP代码中的另一个问题是itemPress用于Table的级别而不是ListItemBase的级别。这确实会触发click事件（如果为ListItemBase元素设置了type="Active"，如此处的其他答案中所述）。但是：事件的上下文不允许导出列表中单击的行！所以你得到一个活动，但你无法分辨它来自哪个项目。

下面是使用ColumnListItem作为ListItemBase的示例，需要更改以识别OP示例中单击的行：

代替...

<Table
    ...
    itemPress="onItemPressed"
>
    <items> 
        <!-- sap.m.ListItemBase -->
    </items>
    <columns>
        <!-- sap.m.Column -->
    </columns>
</Table>

... 用这个：

<Table
    ...
>
    <items>
        <ColumnListItem 
            type="Active"
            press="onItemPressed"
        >
        ...
        </ColumnListItem>
    </items>
    <columns>
        <!-- sap.m.Column -->
    </columns>
</Table>

要导出单击行的模型路径，您现在可以使用如下代码：

onItemPressed: function (oEvt) {
    var sModelPath = oEvt.getSource().getBindingContext('myModelName').getPath();
    var sDiD = this.getView().getModel("myModelName").getProperty(sModelPath + "/myModelFieldName");
}

您还可以在CustomListItem中添加一个customData节点，该节点保存行特定信息，并通过以下方式访问事件处理程序中的键值对：

var aCustomData = oEvt.getSource().getCustomData();

但是又一次： 只有在ListItemBase / ColumnListItem级别调用onItemPressed时，这两种方法才有效！