using_data_binding

最新推荐文章于 2022-02-25 20:00:37 发布

原创最新推荐文章于 2022-02-25 20:00:37 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ActionScript #C #C++ #C# #Adobe

flexBuilder 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用ActionScript表达式进行不同类型的绑定操作，包括简单的属性绑定、字符串拼接、计算及条件运算等。通过实例展示了如何在Flex应用中利用大括号语法实现这些功能。

Binding expressions in curly braces can contain an ActionScript expression that returns a value. For example, you can use the curly braces syntax for the following types of binding:

A single bindable property inside curly braces
String concatenation that includes a bindable property inside curly braces
Calculations on a bindable property inside curly braces
Conditional operations that evaluate a bindable property value

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html"    
    width="420" height="350"
 >
    <mx:Model id="myModel">

        <myModel>
            <!-- Perform simple property binding. -->
            <a>{nameInput.text}</a>
            <!-- Perform string concatenation. -->
            <b>This is {nameInput.text}</b>

            <!-- Perform a calculation. -->
            <c>{(Number(numberInput.text) as Number) * 6 / 7}</c>

            <!-- Perform a conditional operation using a ternary operator;
                the person object contains a Boolean variable called isMale. -->
            <d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d> 
        </myModel>

    </mx:Model>

    <mx:Panel 
        paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

        width="100%" height="100%"
        title="Binding expressions"
    >
        <mx:Form>
            <mx:FormItem label="Last Name:">

                <mx:TextInput id="nameInput"/>
            </mx:FormItem>            
            <mx:FormItem label="Select sex:">
                <mx:RadioButton 
                    id="isMale" 
                    label="Male" 
                    groupName="gender"

                    selected="true"
                />
                <mx:RadioButton 
                    id="isFemale" 
                    label="Female" 
                    groupName="gender"

                />
            </mx:FormItem>
            <mx:FormItem label="Enter a number:">
            <mx:TextInput id="numberInput" text="0"/>

            </mx:FormItem>            
        </mx:Form>
        
        <mx:Text text="{'Simple binding: '+myModel.a}"/>
        <mx:Text text="{'String concatenation: '+myModel.b}"/>

        <mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>        
        <mx:Text text="{'Conditional: '+myModel.d}"/>

    </mx:Panel>    
</mx:Application>