双方向データバインディングの問題

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 クラスには 2 つの継承子があります。 TextBox そして ImageBox. 。これらのクラスはすべて、 [Bindable]. 。他のコンポーネントで選択します Box オブジェクトをオブジェクトとして作成し、このイベントについて上記のコンポーネントに通知します。 EventBus. 。選択したものを渡すためにも使用します Box 物体。それぞれ TextBox オブジェクトには ArrayCollection 利用可能なフォント サイズ (フォント) と選択したフォント サイズ。私を縛りたい DropDownList 2 つの方法でこれらの値に設定します。それで DropDownList 現在選択されているボックスのフォント サイズ (フォント) を常に表示し、ユーザーがリストから別の値を選択すると、その値が現在の値に設定されます。 TextBox 物体。

初めて TextBox オブジェクトを選択したときはすべて正常に動作しましたが、別のオブジェクトを選択するとエラーが発生しました。

範囲エラー:プロパティフォントサイズ値0はflashx.textlayout.property ::property$/defaulterrorrorhandler（）[c： vellum branches v2 2.0 dev output opensource textlayout src flashx text textlayout propiction Property.as:31] flashx.textlayout.property ::property/sethelper(） ：230] flashx.textlayout.formats :: textlayoutformat/setstylebyproperty（）[c： vellum branches v2 2.0 dev output opensource textlayout src flashx textlayout formats text textlayoutformat.as flashx.textlayout.formats :: textlayoutformat/set fontsize（）[c： vellum branches v2 2.0 dev output opensource textlayout src flashx textlayout formats textlayoutformat.as：1044] .core :: csstextlayoutformat（）[e： dev 4.y frameworks project spark src spark core csstextlayoutformat.as：75] at spark.components :: richeditabletext/updatestyesifed（）[e： dev 4.y frameworks projects spark src spark components ritheditabletext.as：3649] spark.components :: richeditabletext/commitproperties（）[e： dev 4.y frameworks project spark Spark src spark components richeditabletext.as：2509] at mx.core :: uicomponent/validateProperties（）[e： dev 4.y frameworks projects framework src mx core uicomponent.as： 8219] Mx.Managers :: LayoutManager/ValidateProperties（）[e： dev 4.y frameworks projects framework src mx managerers layoutmanager.as：597] mx.managers :: layoutmanager/dophasedinstantation tantiontion （）[e： dev 4.y frameworks project framework src mx managerers layoutmanager.as：813] mx.managers :: layoutmanager/dophasedinstantiationcallback（）[e： dev 4.y frameworks projects framework src mx managerers layoutmanager.as：1180

どうにか selectedValue の財産 DropDownList 0になります。私の何が間違っているのでしょうか？

Answer 1

この実際のアプリをデバッグせずに、「内部で」何が起こっているかを確認するのは簡単ではありません。すべてのセッターを自分でトレースして、bindbgs が発生する順序を確認できます。

私の考えでは、2 つのバインディング (selectedItem と dataProvider) が期待どおりに同期していないことが考えられます。どちらが最初に起こるかはわかりません。さらに重要なのは、どちらかを設定したときに drpdownlist 内で何が起こるかはわかりません。結果として、ある時点では、双方向バインディングにより、その時点では null である selectedItem が元に戻され、fontSize に 0 が設定されます (Number(null) が 0 であるため)。そして、その 0 は別の場所で発生するエラーを引き起こします。

まず、fontSize セッターに実際に設定されているものを試してください (trace() を入れます)。

ご存知のとおり、双方向バインディングは良いアイデアだと思われるため、私は常に変更イベントを処理して (このイベント ハンドラーで設定を戻す)、「クラシック バインディング」に戻りました。双方向バインドを使用する場合、これと同様の問題が常に発生しました。