양방향 데이터 바인딩 문제
-
26-12-2019 - |
문제
내 구성 요소의 코드는 다음과 같습니다.
<?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이 됩니다.내가 도대체 뭘 잘못하고있는 겁니까?
해결책
이 실제 앱을 디버깅하지 않고 "내부"에서 무슨 일이 일어나고 있는지 확인하는 것은 쉽지 않습니다.모든 설정자를 직접 추적하여 바인딩이 발생하는 순서를 확인할 수 있습니다.
제 생각에는 두 바인딩(selectedItem 및 dataProvider)이 원하는 대로 동기화되지 않은 것이 발생할 수 있기 때문입니다.어떤 일이 먼저 일어날지 결코 알 수 없으며, 더 중요한 것은 그 중 하나를 설정할 때 drpdownlist 내에서 어떤 일이 발생하는지입니다.결과는 한 지점에서 양방향 바인딩이 해당 순간에 null인 selectedItem을 다시 설정하고 (Number(null)이 0이기 때문에) FontSize에 0을 설정한다는 것입니다.그리고 그 0은 다른 곳에서 발생하는 오류를 초래합니다.
시작을 위해 현재 글꼴 크기 설정기(trace() 삽입)에 설정되어 있는 것을 시도해 보세요.
양방향 바인딩이 좋은 아이디어인 것 같아서 항상 변경 이벤트를 처리하는 "클래식 바인딩"으로 돌아갔습니다(이 이벤트 핸들러에서 다시 설정).양방향 바인딩을 사용할 때 항상 이와 유사한 문제가 발생했습니다.