Как привязать значение счетчика к одному свойству?

Question

В настоящее время я работаю с одиночными плитками и хочу добавить некоторые значения счетчика из службы OData Northwind.Приложение содержит только один вид и один контроллер.

Просмотр

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

MessageToast внутри функции форматирования работает нормально и показывает правильное количество клиентов ("91").Но число, которое я хочу показать на плитке, всегда показывает "0".

Answer 1

Как и в предыдущем ответе от Nandan, я обычно использую автономный метод для получения значения для плитки.

        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)
            });
        },

Мне это нравится, потому что я могу настроить таймер на регулярное обновление счетчика.

Answer 2

Это совсем другой подход к тому, чего вы пытаетесь достичь.Однако вот некоторая информация, которую я мог бы получить, чтобы получить это:

1. Почему значение, возвращаемое средством форматирования, не отображается в привязке?Ответ: Это не будет отображаться!Почему: Binding при просмотре не ожидает, пока форматер function вернет значение.Запрос на чтение, выполненный в форматере, по умолчанию равен « async ».Однако даже если бы он работал синхронно, вы можете попробовать что-то вроде этого:

   formatTile: function () {var counter;this.oModel.read ("/ Customers / $ count", {async: true, success: function (oData, response) {counter = response.body; счетчик возврата;

   }});}

Но это не сработает, так как чтение может занять некоторое время, и привязка не будет ждать.

1. Обычно используется обновление $ countв заголовках списка и таблицы.Где это работает следующим образом (который я также применил в качестве обходного пути)

Должен быть триггер события (в моем примере onUpdateFinishedMaster), чтобы получить количество клиентов итогда значение в 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>

1. Добавить кнопку рядом с общей плиткой:

						<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» также может периодически вызываться с помощью таймера.

Пожалуйста, дайте мне знать, если это поможет.