实时更新项目数量

Question

我有一个要求，我需要将列表项的数量实时更新到页面的子标题。我想使用

sap.ui.base.EventProvider

、聚合绑定或表达式绑定。请指导我，因为我以前从未使用过它。

如果我删除列表项，列表项的数量应该实时更新。

Answer 1

客户端模型

如果使用JSONModel这样的

客户端

模型（即假设所有数据在客户端上都可用）并且目标集合是数组，则简单的表达式绑定就足够了：

title="{= ${myJSONModel>/myProducts}.length}"

• 示例 1（ClientModel）： 从

  sap.m.Table

删除项目后更新计数
• 示例 2（ClientModel）： 过滤后更新计数

  sap.ui.table.Table

正如您在上面的示例中看到的，当项目数量发生变化时，框架会通知Expression Binding，它最终会自动更新属性值。

服务器端模型（例如 OData）

OData V2

使用来自

updateFinished

api 的 sap.m.ListBase

事件

特别是如果启用了增长功能，此事件会派上用场，始终获取框架分配给事件参数的新计数值

total

。

[参数

total

]可以在

growing

属性设置为

true

时使用。

• 示例 3 (v2.ODataModel): 过滤后更新计数

  sap.m.ListBase

<List
  growing="true"
  items="{/Products}"
  updateFinished=".onUpdateFinished"
>

onUpdateFinished: function(event) {
  const reason = event.getParameter("reason"); // "Filter", "Sort", "Refresh", "Growing", ..
  const count = event.getParameter("total"); // Do something with this $count value
  // ...
},

控件更新并处理项目绑定后会触发

updateFinished

事件。事件参数

"total"

提供根据过滤、排序等操作请求的

$count

的值..

使用来自

change

api 的 sap.ui.model.Binding

事件

此事件可以应用于 any 绑定，特别是当控件不支持

updateFinished

事件时。

someAggregation="{
  path: '/Products',
  events: {
    change: '.onChange'
  }
}"

onChange: function(event) {
  const reason = event.getParameter("reason"); // See: sap.ui.model.ChangeReason
  const count = event.getSource().getLength();
  // ...
},

• event.getSource()

  返回相应的(List)Binding对象，该对象具有内部存储

  的结果

  $count

  （或

  $inlinecount）。我们可以通过调用 public API

  getLength()

  来获取计数结果。
• 一个缺点是

  "growing"

  中没有包含

  sap.ui.model.ChangeReason

  原因。但如果控件可以增长，它可能是从支持 updateFinished

   事件的 ListBase 派生的。

手动触发（仅限V2）

如果根本没有列表绑定但仍然需要计数值，我们始终可以手动发送请求来获取计数值。为此，将系统查询

$count

 附加到读取方法中的路径：

myV2ODataModel.read("/Products/$count", {
  filters: [/*...*/],
  success: function(data) {
    const count = +data; // "+" parses the string to number.
    // ...
  }.bind(this),
}) 

OData V4

请查看文档主题

Binding Collection Inline Count。

Answer 2

o数据V4

<Table id="SalesOrders"
    items="{
        path : '/SalesOrderList',
        parameters : {
            $count : true
        }
    }"
>
    <headerToolbar>
        <Toolbar>
            <content>
                <Title id="SalesOrdersTitle" text="{$count} Sales Orders"/>
            </content>
        </Toolbar>
    </headerToolbar>
    ...
</Table>

更新完成

onUpdateFinished: function(oEvent) {
            var sTitle
                , oTable      = oEvent.getSource()
                , iTotalItems = oEvent.getParameter("total");
        
            if (iTotalItems && oTable.getBinding("items").isLengthFinal()) {
                sTitle = this.getText("txtTableCount", [iTotalItems]);
            } else {
                sTitle = this.getText("txtTableCount", [0]);
            }
            this.getModel("modelApp").setProperty("/titleTable", sTitle);
        },

https://openui5.hana.ondemand.com/topic/77d2310b637b490495d78b393ed6aa64

Answer 3

我会猜测“MyListModel”是你的模型名称，里面有类似这样的内容：

[
  {objectName: "object1"},
  {objectName: "object2"},
  {objectName: "object3"}
]

然后尝试：

<Page title="{= ${myListModel>/}.length}">