时间戳

首页 > 解决方案 > InteractiveBarChart：如何绑定模型

sapui5 - InteractiveBarChart：如何绑定模型

问题描述

我在 XML 视图中找不到任何关于将 JSON 模型绑定到InteractiveBarChart的示例。

我的看法如下：

<core:View
  xmlns:core="sap.ui.core"
  xmlns:m="sap.m"
  xmlns="sap.f"
  xmlns:f="sap.f"
  xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
  xmlns:mc="sap.suite.ui.microchart"
  xmlns:layout="sap.ui.layout"
  xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  controllerName="webui.controller.Logger.HomeLogger"
  height="100%"
>
  <DynamicPage id="dynamicPage"
    navButtonPress="onNavBack"
    showNavButton="true"
  >
    <title>
      <f:DynamicPageTitle>
        <f:heading>
          <m:Title text="Methode Logger" />
        </f:heading>
        <f:expandedContent>
          <m:Text text="System analysis" />
        </f:expandedContent>
        <f:actions>
          <m:ToolbarSpacer />
          <m:Button
            icon="sap-icon://action-settings"
            binding="{securitySystem>/}"
            press="onSettingsPress"
            visible="{securitySystem>enabledApplications/enableSettingsAdmin}"
          />
        </f:actions>
      </f:DynamicPageTitle>
    </title>
    <header>
      <DynamicPageHeader>
        <content>
          <layout:Grid defaultSpan="XL6 L6 M6 S12">
            <m:FlexBox
              width="20rem"
              height="10rem"
              alignItems="Center"
              class="sapUiSmallMargin"
            >
              <m:items>
                <mc:InteractiveBarChart
                  labelWidth="25%"
                  selectionChanged="chartSelectionChanged"
                  press="press"
                  bindBars="{/}"
                >
                  <mc:bars>
                    <mc:InteractiveBarChartBar
                      label="{key}"
                      value="{value}"
                    />
                  </mc:bars>
                </mc:InteractiveBarChart>
              </m:items>
            </m:FlexBox>
          </layout:Grid>
        </content>
      </DynamicPageHeader>
    </header>
  </DynamicPage>
</core:View>

我必须将 InteractiveBarChart 绑定到我的模型，即控制器中设置的数组。通过 SAP 参考，我必须使用bindBars方法，但我无法使其工作。

标签： sapui5

解决方案

UI5 中的任何控件都具有相同的数据绑定概念：属性和聚合绑定。

如果控件旨在显示多个事物（即表格或列表），它将具有所谓的聚合。

在InteractiveBarChart控件中有一个聚合“ bars ”。

任何控件都可以通过统一的绑定语法与模型绑定。

  • 对于编程绑定是以下模板：“bind{NAME OF AGGREGATION}”。所以在这种情况下，它将是“ bindBars ”方法，它采用与任何聚合绑定相同的参数列表；
  • 对于 XML 中的声明绑定，您必须做两件事：
    1. 告诉控件有关数据源的信息。在您的情况下，您应该将名为“ bars ”的控件属性设置为绑定字符串“ {/} ”，以防您将原始数组存储在默认模型的根属性中（即没有名称的模型）
    2. 定义一个模板，它将用作创建条形列表的基础（您已经正确完成了）

推荐阅读