這是調用mxml中的組件方法的正確方法

Question

我正在通過學​​習Flex來發現並發現一些奇怪的行爲。當我嘗試編譯我的代碼時，出現此錯誤 - 錯誤：調用可能未定義的方法updateStory。我以前用這種方法調用過方法，並且在這種情況下不能發現有什麼問題。以下是組件的代碼：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <mx:Script> 
    <![CDATA[ 

    import mx.collections.ArrayCollection; 

    [Bindable] 
    public var storyCards:ArrayCollection; 

    private function updateStory():void 
    { 
     trace("success"); 
    } 

    ]]> 
    </mx:Script> 

    <mx:TileList dataProvider="{storyCards}" > 

    <mx:itemRenderer> 

     <mx:Component> 

    <mx:HBox> 
     <mx:Label /> 
     <mx:TextInput keyUp="updateStory()" /> 
     <mx:TextArea text="{data.notes}" /> 
    </mx:HBox> 

     </mx:Component> 

    </mx:itemRenderer> 

    </mx:TileList> 
</mx:Canvas> 

任何人都可以指向正確的方向嗎？

Answer 1

問題是與MX：組件父標籤。

從the docs:

The <mx:Component> tag defines a new scope within an MXML file, where the local scope of the item renderer or item editor is defined by the MXML code block delimited by the <mx:Component> and </mx:Component> tags. To access elements outside of the local scope of the item renderer or item editor, you prefix the element name with the outerDocument keyword.

所以，你需要做 'updateStory' 公衆並添加outerDocument關鍵字作爲，像這樣：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
    <![CDATA[ 

    import mx.collections.ArrayCollection; 

    [Bindable] 
    public var storyCards:ArrayCollection; 

    public function updateStory():void 
    { 
     trace("success"); 
    }  
    ]]> 
</mx:Script> 
<mx:TileList dataProvider="{storyCards}" > 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox> 
       <mx:Label /> 
       <mx:TextInput keyUp="outerDocument.updateStory()" /> 
       <mx:TextArea text="{data.notes}" /> 
       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:TileList> 
</mx:Canvas> 

Answer 2

你也可以派遣從ItemRenderer的組件中的事件，和在主文檔中添加一個Listener。如果您想將ItemRenderer組件移植到單獨的MXML組件文件，這很有用。

這是你的代碼：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
     <![CDATA[ 

     import mx.collections.ArrayCollection; 

     [Bindable] 
     public var storyCards:ArrayCollection; 

     private function updateStory():void 
     { 
      trace("success"); 
     }  

     ]]> 
    </mx:Script> 

    <mx:TileList dataProvider="{storyCards}" myEvent="updateStory();"> 

     <mx:itemRenderer> 

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

     <mx:HBox> 
      <mx:Label /> 
      <mx:TextInput keyUp="dispatchEvent(new Event('myEvent', true))" /> 
      <mx:TextArea text="{data.notes}" /> 
     </mx:HBox> 

      </mx:Component> 

     </mx:itemRenderer> 

    </mx:TileList> 
</mx:Canvas> 

這裏是你將如何使用它在一個單獨的MXML組件：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
     <![CDATA[ 

     import mx.collections.ArrayCollection; 

     [Bindable] 
     public var storyCards:ArrayCollection; 

     private function updateStory():void 
     { 
      trace("success"); 
     }  

     ]]> 
    </mx:Script> 

    <mx:TileList dataProvider="{storyCards}" myEvent="updateStory();" itemRenderer="StoryEditor" /> 
</mx:Canvas> 

StoryEditor.mxml: 

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Metadata> 
     [Event(name="myEvent", type="flash.events.Event")] 
    </mx:Metadata> 

    <mx:Label /> 

    <mx:TextInput keyUp="dispatchEvent(new Event('myEvent', true));" /> 

    <mx:TextArea text="{data.notes}" /> 
</mx:HBox>