SAPUI5 Walkthrough Step 22: Expression Binding

Step 22: Expression Binding

 

表达式绑定。直接在视图中编写一些简单但逻辑表达式，用来控制页面（如按钮的编辑与只读）

在这个示例中，我们用表达式来控制numberState属性的值（具体表现为颜色，Error为红色，Success为绿色）

修改 webapp/view/InvoiceList.view.xml 文件

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.walkthrough.controller.InvoiceList">
    <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}"
                numberState="{= ${invoice>ExtendedPrice} > 10 ? 'Error' : 'Success' }"    />
        </items>
    </List>
</mvc:View>

 

三元运算 condition ? expr1 : expr2 

问号之前为判断语句，如果为真，则执行第一个表达式，如果为假，则执行第二个表达式

三元运算中，增加或者条件（Status为10、20时，按钮可见）

    <Button id="BTN_SAVE" press="onSave" text="保存" type="Emphasized" icon="sap-icon://save" width="auto" 
        visible="{= ${/Status} === '10' ||
                    ${/Status} === '20' 
                        ? true: false}" />