Question

我正在尝试使用SAP UI5中的国家/地区列表创建一个组合框。

我创建了一个组合框并创建了一些国家/地区的动态列表，但要创建超过100个国家/地区，唯一简单的方法是创建国家/地区的JSON文件，然后填充Controller.js。

我尝试创建一个JSON文件，但我不确定是否必须将其存储在模型文件夹或 root 下。

我必须在XML视图和控制器中进行哪些更改，以及应该在哪里附加countries.json文件？

Answer 1

你正在寻找一种名为＆＃34; Aggregation Binding＆＃34; Aggregation Binding in XML views

这是一个参考解释

的例子

如何使用json文件中的数据创建模型
如何将模型数据绑定到XML视图控件（您必须绑定comboBox而不是表）

How to bind json data model to an XML view

如果这有帮助，请告诉我。

Answer 2

也许您根本不需要创建countries.json文件：）

由于UI5内部利用Common Locale Data Repository（CLDR）并通过sap.ui.core.LocaleData ^API提供数据，因此您可以轻松使用…：

语言名称，
地区和国家名称，
货币名称，包括单数/复数修改，等等。

…在您的应用程序中。语言环境数据支持的区域列表以JSON格式here存储。在其中一个文件中，如果查看属性"territories"，则会看到其中列出了国家/地区名称。您可以过滤掉所有不属于国家的不相关区域，然后将其余区域绑定到组合框的items聚合中。这是一个演示：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Locale",
  "sap/ui/core/LocaleData",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/mvc/XMLView",
], function(Locale, LocaleData, JSONModel, XMLView) {
  "use strict";

  XMLView.create({
    definition: `<mvc:View
      xmlns:mvc="sap.ui.core"
      xmlns:core="sap.ui.core"
      xmlns="sap.m"
      height="100%"
      displayBlock="true"
    >
      <App>
        <ComboBox
          class="sapUiTinyMargin"
          width="15rem"
          placeholder="Select a country.."
          filterSecondaryValues="true"
          showSecondaryValues="true"
          items="{
            path: 'countries>/',
            sorter: {
              path: 'name'
            }
          }"
        >
          <core:ListItem
            key="{countries>code}"
            text="{countries>name}"
            additionalText="{countries>code}"
          />
        </ComboBox>
      </App>
    </mvc:View>`,
    models: {
      "countries": createCountryModel(getCountries()),
    }
  }).then(view => view.placeAt("content"));

  function createCountryModel(countries, sizeLimit = 300) {
    const model = new JSONModel(countries);
    model.setSizeLimit(sizeLimit);
    model.setDefaultBindingMode("OneWay");
    return model;
  }

  function getCountries() {
    const territories = getTerritories();
    return extractCountriesFrom(territories, byCustomCheck());
  }

  function getTerritories(localeId) {
    const currentConfig = sap.ui.getCore().getConfiguration();
    const locale = localeId ? new Locale(localeId) : currentConfig.getLocale();
    const localeData = new LocaleData(locale);
    return localeData.getTerritories(); // includes country names
  }

  function extractCountriesFrom(territories, customCheck = () => true) {
    const isValidCountry = createCountryCheck(customCheck);
    const toObject = code => Object.freeze({
      code: code,
      name: territories[code],
    });
    const countryObjects = Object.keys(territories)
      .filter(isValidCountry)
      .map(toObject);
    return Object.freeze(countryObjects);
  }
  
  function createCountryCheck(customCheck, obviouslyNotCountries = [
    "EU", // "European Union"
    "EZ", // "Eurozone"
    "UN", // "United Nations"
    "ZZ", // "Unknown Region"
  ]) {
    return territoryCode => territoryCode.length == 2
      && !obviouslyNotCountries.includes(territoryCode)
      && customCheck(territoryCode);
  }

  function byCustomCheck() { // returns a function that returns boolean
    // E.g.: list of sanctioned countries you want to exclude
    const list = [
      "AF",
      "KP",
      "IR",
      // ...
    ];
    return countryCode => !list.includes(countryCode);
  }

}));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

^{（以上代码段使用了一些较新的JS和UI5 API，但概念相同）}

如示例所示，ComboBox已成功填充国家/地区。创建新的LocaleData实例后，会立即发送一个请求（当前为via sync XHR）以获取以UI5 detects from the client settings的语言翻译的数据。如果未检测到任何语言，则将检索en.json文件。^src

我认为上述方法具有以下优点：

无需创建和维护单独的“国家”文件。
多语言支持
当UI5尝试获取相同的语言环境数据文件时，例如使用Calendar时，浏览器可以从 cache 快速提供文件，因为以前已经提取过相同的文件。

注意

在创建JSONModel来存储100多个国家/地区名称时，请记住也要增加size limit。当前的默认限制为100。

从JSON

2 个答案:

注意