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