양방향 데이터 바인딩 문제

Question

내 구성 요소의 코드는 다음과 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   width="950" height="50" creationComplete="this_creationCompleteHandler(event)"
                   currentState="default" enabled="{currentBox!=null}">
    <s:states>
        <s:State name="default"/>
        <s:State name="boxSelected" stateGroups="admin"/>
        <s:State name="textBoxSelected" stateGroups="user"/>
        <s:State name="imageBoxSelected" stateGroups="user"/>
    </s:states>
    <s:layout>
        <s:HorizontalLayout gap="10" horizontalAlign="left" paddingBottom="10" paddingLeft="10"
                            paddingRight="10" paddingTop="10" verticalAlign="middle"/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public var model:Model;

            private var _currentBox:Box = null;
            [Bindable]
            public function set currentBox(box:Box):void 
            {
                _currentBox = box;
                if(model.userType == Model.USER_TYPE_ADMIN)
                    currentState = "boxSelected";
                else if(box is TextBox)
                    currentState = "textBoxSelected";
                else if(box is ImageBox)
                    currentState = "imageBoxSelected";
                else
                    currentState = "default";
            }

            public function get currentBox():Box
            {
                return _currentBox;
            }

            protected function this_creationCompleteHandler(event:FlexEvent):void
            {
                AppEventBus.instance.addListener(AppEvent.BOX_SELECTED, boxSelectedHandler);
                AppEventBus.instance.addListener(AppEvent.PAGE_SELECTED, pageSelectedhandler);
            }

            protected function boxSelectedHandler(event:AppEvent):void
            {
                currentBox = event.data as Box;
            }

            protected function pageSelectedhandler(event:AppEvent):void
            {
                currentBox = null;
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:ToggleButton id="secureLockButton" includeIn="admin, user" width="20" height="20"
                    selected="@{currentBox.secured}"
                    styleName="secureButtonStyle"/>
    <s:DropDownList id="fontsList" includeIn="textBoxSelected" width="150" height="20"
                    selectedItem="@{(currentBox as TextBox).font}"
                    dataProvider="{(currentBox as TextBox).fonts}"/>
    <s:DropDownList id="fontSizesList" includeIn="textBoxSelected" width="60" height="20"
                    selectedItem="@{(currentBox as TextBox).fontSize}"
                    dataProvider="{(currentBox as TextBox).fontSizes}"/>
    <s:DropDownList id="boxTypes" includeIn="boxSelected" width="70" height="20"
                    dataProvider="{Box.BOX_TYPES}" selectedItem="{currentBox.boxType}"/>
    <s:TextInput id="boxName" includeIn="boxSelected" width="70" height="20"
                 text="@{currentBox.name}"/>
</s:BorderContainer>

Box 클래스에는 두 개의 상속자가 있습니다. TextBox 그리고 ImageBox.이 수업은 모두 [Bindable].다른 구성 요소에서 내가 선택한 Box 이 이벤트에 대해 이의를 제기하고 위의 구성 요소에 알립니다. EventBus.또한 선택한 항목을 통과하는 데 사용합니다. Box 물체.각 TextBox 개체가 ArrayCollection 사용 가능한 글꼴 크기(글꼴) 및 선택한 글꼴.나는 내 것을 묶고 싶다 DropDownList 두 가지 방법으로 이 값을 변환합니다.그래서 DropDownList 항상 상자의 현재 선택된 글꼴 크기(글꼴)를 표시하고 사용자가 목록에서 다른 값을 선택하면 현재로 설정됩니다. TextBox 물체.

처음으로 TextBox 개체를 선택하면 모든 것이 잘 작동하지만 다른 개체를 선택하면 오류가 발생합니다.

범위오류:속성 Fontsize value 0은 Flashx.textLayout.property::property$/defaulterrorhandler ()에서 범위를 벗어났습니다. property.as:31]에서 flashx.textlayout.property::property/sethelper()..C: vellUMBRANCHESv2222222222222222222222uctlayoutproperty property.as : 230] AT FLICHX.TEXTLAYOUT.FORMATS :: TEXTLAYOUTFORMAT/SETSTYLEBYPROPERTY () flashx.textlayout.formats :: textlayoutformat/set fontsize () [) [) [c : vellum branches v2 v2 v2 dev output OpenSource textlayout src textlayout formats textlayoutformat.as : 1044] .core :: csstextLayoutFormat () dev 4.y frameworks projects spark spark spark spark 구성 요소 RicheditableText.as : 3649] spark.components :: RicheditableText/CommitProperties () [E : dev 4.y framworks projects spark src spark components richeditabletext.as : 2509] at mx.core :: uicomponent/validateProperties () 8219]에서 mx.managers :: layoutmanager/validateproperties () [e : dev 4.y frameworks projects framework src mx managers layoutmanager.as : 597] mx.managers :: layoutmanager/dophasedinstantiation. () [e : dev 4.y frameworks projects framework src mx managers layoutmanager.as : 813] at mx.managers :: layoutmanager/dophasedinstantiationcallback () [e : dev 4.y frameworks projects framework src mx Managers LayoutManager.as : 1180

어떻게든 selectedValue 의 자산 DropDownList 0이 됩니다.내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

이 실제 앱을 디버깅하지 않고 "내부"에서 무슨 일이 일어나고 있는지 확인하는 것은 쉽지 않습니다.모든 설정자를 직접 추적하여 바인딩이 발생하는 순서를 확인할 수 있습니다.

제 생각에는 두 바인딩(selectedItem 및 dataProvider)이 원하는 대로 동기화되지 않은 것이 발생할 수 있기 때문입니다.어떤 일이 먼저 일어날지 결코 알 수 없으며, 더 중요한 것은 그 중 하나를 설정할 때 drpdownlist 내에서 어떤 일이 발생하는지입니다.결과는 한 지점에서 양방향 바인딩이 해당 순간에 null인 selectedItem을 다시 설정하고 (Number(null)이 0이기 때문에) FontSize에 0을 설정한다는 것입니다.그리고 그 0은 다른 곳에서 발생하는 오류를 초래합니다.

시작을 위해 현재 글꼴 크기 설정기(trace() 삽입)에 설정되어 있는 것을 시도해 보세요.

양방향 바인딩이 좋은 아이디어인 것 같아서 항상 변경 이벤트를 처리하는 "클래식 바인딩"으로 돌아갔습니다(이 이벤트 핸들러에서 다시 설정).양방향 바인딩을 사용할 때 항상 이와 유사한 문제가 발생했습니다.