从flex转发器中删除XML节点不起作用？

I have the following repeater code:

我有以下转发器代码:

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

Acting on the following 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>

This allows the user to edit the names and values of the Chapter objects. However, the "delete" operation doesn't work for some reason?

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

Can anyone advise me as to how to reference items within a repeater in order to delete them?

谁能告诉我如何在转发器中引用项目以删除它们?

1 个解决方案

#1

Hmmm... this one has taken me a while to at least get to some sort of solution for it. In your click event (and subsequently the change events on the text area and numericStepper) you access currentTarget. CurrentTarget will actually return a reference to the button itself. As it is a button and not a repeater getRepeaterItem() would not return anything. I'm actually surprised that calling getRepeatItem() hasn't caused an error to be thrown. Needless to say that i don't think they were updating the xml.

嗯......这个花了我一段时间才至少得到某种解决方案。在您的单击事件(以及随后文本区域和numericStepper上的更改事件)中,您将访问currentTarget。 CurrentTarget实际上会返回对按钮本身的引用。由于它是一个按钮而不是转发器,因此getRepeaterItem()不会返回任何内容。我真的很惊讶,调用getRepeatItem()并没有导致抛出错误。不用说我不认为他们正在更新xml。

My solution externalises the FormItem into it's own component (as that way, when click is fired i can bubble the event from the FormItem. That way i always know what formItem the event has come from) and then removes the item via an xmlListCollection.

我的解决方案将FormItem外部化为它自己的组件(这样,当点击被触发时,我可以从FormItem冒泡事件。这样我总是知道事件来自哪个formItem),然后通过xmlListCollection删除项目。

So i have a separate component called ChapterFormItem.mxml which contains

所以我有一个名为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>

and in the main application xml (for this example) i have

并在主应用程序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>

#1