双方向データバインディングの問題
-
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
クラスには 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になります。私の何が間違っているのでしょうか?
解決
この実際のアプリをデバッグせずに、「内部で」何が起こっているかを確認するのは簡単ではありません。すべてのセッターを自分でトレースして、bindbgs が発生する順序を確認できます。
私の考えでは、2 つのバインディング (selectedItem と dataProvider) が期待どおりに同期していないことが考えられます。どちらが最初に起こるかはわかりません。さらに重要なのは、どちらかを設定したときに drpdownlist 内で何が起こるかはわかりません。結果として、ある時点では、双方向バインディングにより、その時点では null である selectedItem が元に戻され、fontSize に 0 が設定されます (Number(null) が 0 であるため)。そして、その 0 は別の場所で発生するエラーを引き起こします。
まず、fontSize セッターに実際に設定されているものを試してください (trace() を入れます)。
ご存知のとおり、双方向バインディングは良いアイデアだと思われるため、私は常に変更イベントを処理して (このイベント ハンドラーで設定を戻す)、「クラシック バインディング」に戻りました。双方向バインドを使用する場合、これと同様の問題が常に発生しました。