apache-flex - 从 Flex 中继器中删除 XML 节点不起作用？

Question

我有以下中继器代码:

<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>

这允许用户编辑章节对象的名称和值。但是，“删除”操作由于某种原因不起作用？

任何人都可以告诉我如何在转发器中引用项目以将其删除吗？

Answer 1

嗯...这花了我一段时间才至少找到某种解决方案。在您的单击事件(以及随后文本区域和 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>