Question

我目前正在处理单个Tiles，并希望从Northwind OData服务添加一些计数值。该应用程序只包含一个视图和一个控制器。

视图

<mvc:View
  controllerName="customtileapp.controller.CustomTile1"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
>
  <GenericTile
    class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout"
    header="Country-Specific Profit Margin"
    subheader="Expenses" press="press"
  >
    <TileContent
      unit="EUR"
      footer="Current Quarter"
    >
      <NumericContent
        scale="M"
        value="{
          path: '/Customers',
          formatter: '.formatTile'
        }"
        valueColor="Error"
        indicator="Up"
        formatterValue="true"
      />
    </TileContent>
  </GenericTile>
</mvc:View>

控制器

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageToast",
  "sap/ui/model/odata/v2/ODataModel"
], function (Controller, MessageToast, ODataModel){
  "use strict";

  return Controller.extend("customtileapp.controller.CustomTile1", {
    onInit: function() {
      this.oView = this.getView();
      this.oModel = new ODataModel("/northwind/V2/Northwind/Northwind.svc");
      this.oView.setModel(this.oModel);
    },

    formatTile: function() {
      var counter;
      this.oModel.read("/Customers/$count", {
        async : true,
        success : function(oData, response) {
          counter = response.body;
          MessageToast.show(counter);
        }
      });
      return counter;
    }
  });
});

formatter中的MessageToast功能正常并显示正确数量的客户（"91"）。但是我要在拼贴上显示的数字始终显示"0"。

Answer 1

这是一种与您想要实现的目标截然不同的方法。然而，这里有一些我可以得到的信息：

为什么formatter返回的值没有出现在绑定中？答：这不会出现！为什么：绑定在视图时不会等待格式化程序函数返回该值。格式化程序中执行的读取请求默认为“ async ”。但是，即使它必须同步工作，你也可以尝试这样的事情：

formatTile：function（）{ var counter; this.oModel.read（“/ Customers / $ count”，{async：true， success：function（oData，response）{ counter = response.body; 返回柜台;

}}）; }

但这不会起作用，因为阅读可能需要一段时间，而绑定不会等待。

更新$ count通常用于List和Table标头。它的工作原理如下（我也将其作为解决方法应用）

应该有一个事件触发器（在我的示例中为onUpdateFinishedMaster）以获取Customers的计数，然后可以更新NumericContent中的值。

控制器：

sap.ui.define(['sap/m/MessageToast', 'sap/ui/core/mvc/Controller'],
	function(MessageToast, Controller) {
		"use strict";

		return Controller.extend("tilesGenericTIles.controller.View1", {
			onInit: function() {
				this.oView = this.getView();
				this.oModel = new sap.ui.model.odata.v2.ODataModel("/destinations/northwind/V2/Northwind/Northwind.svc/", true);
				this.oView.setModel(this.oModel);
			},
			formatTile: function(sCount) {
				
				var counter;
				this.oModel.read("/Customers/$count", {
					async: true,
					success: function(oData, response) {
						
						counter = response.body;
						return counter;
						MessageToast.show(sCount);
					}
				});
				
				return 'test' ;

			},
			onUpdateFinishedMaster: function(oEvent){
				// 
				var count,
				oTable = oEvent.getSource();
				var iTotalItems = oEvent.getParameter("total");
				
				this.getView().byId("idNumericContent").setValue(iTotalItems);
			}

		});
	});

View:

<mvc:View controllerName="tilesGenericTIles.controller.View1"  xmlns:l="sap.ui.layout" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<l:VerticalLayout>
						<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Country-Specific Profit Margin" subheader="Expenses"
							press="press">
							<TileContent unit="EUR" footer="Current Quarter">
								<NumericContent scale="MM" value="{path: 'Customers', formatter: '.formatTile'}" valueColor="Error" indicator="Up" id="idNumericContent"/>
							</TileContent>
						</GenericTile>
						<Table id="idMasterTable" width="auto" items="{ path: '/Customers'}" noDataText="{i18n>masterTableNoDataText}"
							busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinishedMaster"
							mode="SingleSelectLeft" inset="false" selectionChange="onMasterTableSelectionChange">
							<columns>
								<Column vAlign="Middle" id="idColumnAppGrp">
									<header>
										<Text text="{Customer Name}"/>
									</header>
								</Column>
								<Column vAlign="Middle" id="idColumnAppGrp1">
									<header>
										<Text text="{Customer Name}"/>
									</header>
								</Column>
							</columns>
								<items>
									<ColumnListItem type="Navigation" press="handleMasterPress" tooltip="{i18n>masterColumnItemTooltip}">
										<cells>
											<ObjectIdentifier title="{ContactName}"/>
											<ObjectIdentifier title="{ContactName}"/>
										</cells>
									</ColumnListItem>
								</items>
							</Table>
						</l:VerticalLayout>
					</content>
				</Page>
			</pages>
		</App>
	</mvc:View>

在通用图块旁边添加一个按钮：

						<l:HorizontalLayout>
						<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Country-Specific Profit Margin" subheader="Expenses"
							press="press">
							<TileContent unit="EUR" footer="Current Quarter">
								<NumericContent scale="MM" value="{path: 'Customers', formatter: '.formatTile'}" valueColor="Error" indicator="Up" id="idNumericContent"/>
							</TileContent>
						</GenericTile>
						<Button text="updateCount" press="updateCount" />
						</l:HorizontalLayout>

更新新闻事件的图块数量。

			updateCount: function(oEvent){
					
				var counter;
				this.oModel.read("/Customers/$count", {
					async: true,
					success: function(oData, response) {
						
						counter = response.body;
						this.getView().byId("idNumericContent").setValue(counter);
					}.bind(this)
				});

此外，还可以使用计时器定期调用“updateCounter”函数。

请告诉我这是否有帮助。

Answer 2

与Nandan早期的回复类似，我通常使用独立方法来获取磁贴的值。

＆＃13;

        getTileValue: function () {
            var oTileValue = this.myView.byId('tileValue');
            this.getModel().read('/Dealers/$count', {
                success: $.proxy(function (oEvent, oResponse) {
                    var count = Number(oResponse.body);
                    oTileValue.setValue(count);
                }, this)
            });
        },

＆＃13;

我喜欢这个，因为我可以设置一个计时器来定期更新计数器。

Answer 3

如果使用的是JSON模型（不是OData），则可以通过XML视图中的表达式绑定来解决此问题。不需要任何高级控制器数学运算：

  <NumericContent
    ...
    value="{= ${/Customers}.length }"
    ...
  />

有关对所有SAPUI5数据模型（JSON，OData v2，OData v4）中的记录进行计数的所有选项，请参见this SO answer。

如何将计数值绑定到单个属性？

视图

控制器

3 个答案: