2

次のリピーターコードがあります。

<mx:Repeater id="chapterRepeater" dataProvider="{Library.Book.Chapter}">
   <mx:FormItem label="Chapter" direction="horizontal">
      <mx:TextInput  width="100" text="{ chapterRepeater.currentItem.@Name}" 
                     change="event.currentTarget.getRepeaterItem().@Name = event.target.text"/>
      <mx:NumericStepper maximum="2000" minimum="0" value="{chapterRepeater.currentItem.@Value}" 
                    change="event.currentTarget.getRepeaterItem().@Value = event.target.value"/>
      <mx:Button label="x" width="20" click="delete event.currentTarget.getRepeaterItem()"/>
  </mx:FormItem>
</mx:Repeater>

次の XML に対する操作

<Library Name="TestLibrary1">
   <Book Name="TestBook1">
      <Chapter Name="TestChapter1" Words="530"/>
      <Chapter Name="TestChapter2" Words="490"/>
      <Chapter Name="TestChapter3" Words="1030"/>
   </Book>
</Library>

これにより、ユーザーは Chapter オブジェクトの名前と値を編集できます。しかし、何らかの理由で「削除」操作が機能しないのですか?

アイテムを削除するためにリピーター内のアイテムを参照する方法について誰かアドバイスしてもらえますか?

4

1 に答える 1

3

うーん...これは、少なくとも何らかの解決策にたどり着くまでに時間がかかりました。クリック イベント (およびその後のテキスト領域と numericStepper の変更イベント) で、currentTarget にアクセスします。CurrentTarget は、実際にはボタン自体への参照を返します。これはボタンでありリピーターではないため、 getRepeaterItem() は何も返しません。getRepeatItem() を呼び出してもエラーがスローされないことに、私は実際に驚いています。言うまでもなく、彼らが xml を更新していたとは思いません。

私のソリューションは、FormItem を独自のコンポーネントに外部化します (そのように、クリックが発生すると、FormItem からイベントをバブルできます。そうすれば、イベントがどの formItem から来たかを常に知ることができます)。次に、xmlListCollection を介してアイテムを削除します。

だから私は含む ChapterFormItem.mxml と呼ばれる別のコンポーネントを持っています

<?xml version="1.0" encoding="utf-8"?>
<mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private var _chapterData : XML;

            [Bindable]
            public function get chapterData() : XML
            {
                return _chapterData;
            }

            public function set chapterData(value : XML) : void
            {
                _chapterData = value;   
            }

            private function clickHandler(event : MouseEvent) : void
            {
                dispatchEvent(new Event("deleteChapter"));
            }

            private function textInputChangeHandler(event : Event) : void
            {
                chapterData.@Name = textInput.text;
            }

            private function numericStepperChangeHandler(event : Event) : void
            {
                chapterData.@Value = numericStepper.value;
            }
        ]]>
    </mx:Script>

    <mx:Metadata>
        [Event(name="deleteChapter", type="flash.events.Event")]
    </mx:Metadata>

    <mx:TextInput id="textInput" width="100" text="{chapterData.@Name}" change="textInputChangeHandler(event)"/>
    <mx:NumericStepper id="numericStepper" maximum="2000" minimum="0" value="{chapterData.@Value}" change="numericStepperChangeHandler(event)"/>
    <mx:Button label="x" width="20" click="clickHandler(event)"/>
</mx:FormItem>

そしてメインアプリケーションxml（この例では）に私は持っています

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">
    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;

        import mx.collections.ArrayCollection;

        [Bindable]
        private var xml:XML = <Library Name="TestLibrary1">
                                   <Book Name="TestBook1">
                                      <Chapter Name="TestChapter1" Words="530"/>
                                      <Chapter Name="TestChapter2" Words="490"/>
                                      <Chapter Name="TestChapter3" Words="1030"/>
                                   </Book>
                                </Library>;

        private function itemDeleteHandler(event : Event) : void
        {

            var chapterItem : ChapterFormItem = event.currentTarget as ChapterFormItem;
            var chapterData : XML = chapterItem.chapterData;


            var xmlListCollection : XMLListCollection = new XMLListCollection(xml.Book.Chapter);
            var chapterDataIndex : int = xmlListCollection.getItemIndex(chapterData);

            xmlListCollection.removeItemAt(chapterDataIndex);
        }

        ]]>
    </mx:Script>

    <mx:Form width="100%" height="100%">

       <mx:Repeater id="chapterRepeater" dataProvider="{xml.Book.Chapter}">
          <local:ChapterFormItem label="Chapter" 
                                 direction="horizontal" 
                                 chapterData="{chapterRepeater.currentItem}"
                                 deleteChapter="itemDeleteHandler(event)"  />
        </mx:Repeater>

    </mx:Form>

</mx:Application>
于 2009-02-04T13:23:49.647 に答える