• UI5-文档-4.21-Data Types


    发票清单已经很好看了,但是没有指定价格的发票是什么?通常价格以技术格式存储,并带有'。数据模型中的分隔符。例如,我们的菠萝发票上的计算价格是87.2,没有货币。我们将使用SAPUI5数据类型正确地格式化价格,使用一个与区域有关的十进制分隔符和分隔符后的两个数字。

    Preview

     

    The list of invoices with prices and number units

    Coding

    You can view and download all files at Walkthrough - Step 21.

     

    webapp/view/InvoiceList.view.xml

    <mvc:View
    
       controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
    
       xmlns="sap.m"
    
       xmlns:mvc="sap.ui.core.mvc">
    
       <List
    
          headerText="{i18n>invoiceListTitle}"
    
          class="sapUiResponsiveMargin"
    
          width="auto"
    
          items="{invoice>/Invoices}">
    
          <items>
    
             <ObjectListItem
    
                   title="{invoice>Quantity} x {invoice>ProductName}"
    
                   number="{
    
                           parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
    
                           type: 'sap.ui.model.type.Currency',
    
                           formatOptions: {
    
                                   showMeasure: false
    
                           }
    
                   }"
    
                   numberUnit="{view>/currency}"/>
    
            </items>
    
       </List>
    
    </mvc:View>

    通过将number和numberUnit属性添加到ObjectListItem控件,我们将价格添加到视图中的发票列表中,然后通过将绑定语法的type属性设置为sap.ui.model.type.Currency,将货币数据类型应用到number上。

    正如您在上面看到的,我们正在为ObjectListItem的number属性使用一种特殊的绑定语法。这种绑定语法使用了所谓的“Calculated Fields”,它允许将来自不同模型的多个属性绑定到控件的单个属性。来自不同模型的属性称为“parts”。 在上面的例子中,控件的属性是number,从两个不同模型检索到的绑定属性(“parts”)是invoice>ExtendedPrice和view>/currency。

    我们希望以欧元显示价格,通常在后端,货币是我们数据模型的一部分。在我们的例子中并非如此,所以我们需要在app中直接定义它。因此,我们为发票列表添加了一个控制器,并使用currency属性作为绑定语法的第二部分。货币类型将根据货币代码为我们处理价格的格式。在我们的例子中,价格显示为两个小数。

    此外,我们将格式化选项showMeasure设置为false。这隐藏了属性号中的货币代码,因为它作为一个单独的属性number单元传递给ObjectListItem控件。

    webapp/controller/InvoiceList.controller.js (New)

    sap.ui.define([
    
            "sap/ui/core/mvc/Controller",
    
            "sap/ui/model/json/JSONModel"
    
    ],function(Controller,JSONModel){
    
            "use strict";
    
     
    
            returnController.extend("sap.ui.demo.walkthrough.controller.InvoiceList",{
    
     
    
                   onInit :function(){
    
                           var oViewModel =newJSONModel({
    
                                   currency:"EUR"
    
                           });
    
                           this.getView().setModel(oViewModel,"view");
    
                   }
    
     
    
            });
    
    });

    为了能够访问不属于数据模型的货币代码,我们在发票列表的控制器中定义了一个视图模型。它是一个简单的JSON模型,只有一个关键货币和值EUR。这可以绑定到number字段的格式化程序。视图模型可以保存分配给控件的任何配置选项,以绑定诸如可见性之类的属性。

    Conventions

      尽可能使用数据类型而不是自定义格式器。


    Parent topic: Walkthrough

    Previous: Step 20: Aggregation Binding

    Next: Step 22: Expression Binding

    Related Information

    Composite Binding

    Formatting, Parsing, and Validating Data

    API Reference: sap.ui.model.type

    API Reference: sap.ui.model.type.Currency

    Samples: sap.ui.model.type.Currency

  • 相关阅读:
    使用 ASP.NET Core 创建 Web API
    C# 请求接口返回中文乱码→???
    无法从命令行或调试器启动服务,必须首先安装Windows服务(使用installutil.exe),然后用ServerExplorer、Windows服务器管理工具或NET START命令启动它
    制作和引用自定义图标库
    asp.net core 3.1 解决跨域的问题
    看自己以前写的代码
    图解SQL Server 数据库定时自动备份
    码云修改登录密码后终端连不上的问题
    C#中string.format用法详解
    C#高级编程之泛型详解
  • 原文地址:https://www.cnblogs.com/ricoo/p/10102968.html
Copyright © 2020-2023  润新知