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

时间:2009-02-04 11:36:38

标签: flex actionscript mxml

我有以下转发器代码:

<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对象的名称和值。但是,“删除”操作由于某种原因不起作用?

有人可以告诉我如何在转发器中引用项目以删除它们吗?

1 个答案:

答案 0 :(得分: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>