格式化值以显示在地图 ui5 应用程序上失败

Question

我想从 Address.Json 模型中读取如下所示的信息：

{
  "Street": "Wall St",
  "Zip": "10005",
  "City": "New York",
  "Country": "United states"
}

将它们显示在 Object.view.xml 中作为图像：

<Image class="sapUiSmallMargin" src="{
                    parts: [
                        '/address/Street',
                        '/address/Zip',
                        '/address/City',
                        '/address/Country'
                    ],
                    formatter: '.formatter.formatMapUrl'
                }" />

并在 formatter.js 中格式化 URL 以便它显示在 ui5 应用程序的地图上：

sap.ui.define([
    'sap/base/security/encodeURL'
], function (encodeURL) {
    "use strict";

    return {
        /**
         * Formats an address to a static google maps image
         * @public
         * @param {string} sStreet the street
         * @param {string} sZIP the postal code
         * @param {string} sCity the city
         * @param {string} sCountry the country
         * @returns {string} sValue a google maps URL that can be bound to an image
         */
        formatMapUrl: function(sStreet, sZIP, sCity, sCountry) {
            var sBaseUrl = "https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=640x640&markers=";
            var sEncodedString = encodeURL(sStreet + ", " + sZIP +  " " + sCity + ", " + sCountry);
            return sBaseUrl + sEncodedString;
        }


    };

});

不幸的是，由于格式化程序中的参数未定义，我无法在应用程序上显示地图：

因此应用程序上的地图部分是空的：

有谁知道我该如何修复它以及为什么我编写的代码不起作用？

Answer 1

您需要将模型添加到视图才能绑定到它。请参阅以下示例。

Controller.js:

onInit: function () {
    var oModel = new JSONModel({
        "Street": "Wall St",
        "Zip": "10005",
        "City": "New York",
        "Country": "United states"
    });
    // Adds JSONModel with name 'addressModel' to the view so you can bind to it
    this.getView().setModel(oModel, "addressModel");
}

View.xml:

<Image
    class="sapUiSmallMargin"
    src="{
        parts: [
            'addressModel>/Street',
            'addressModel>/Zip',
            'addressModel>/City',
            'addressModel>/Country'
         ],
         formatter: '.formatter.formatMapUrl'
     }"
  />

格式化值以显示在地图 ui5 应用程序上失败

Formatting values to show on map ui5 app failed

sapui5