Ember breaks with 'Action is undefined'

[kalien]

My UI is constructed in the following way:

<script type="text/x-handlebars" data-template-name="application">
    {{outlet body}}
    {{outlet popup}}
</script>

Then 'body' gets connected to the following template:

<script type="text/x-handlebars" data-template-name="tabs">
    <div id="main_tabs">
        <ul>
            <li><a href="#tabs-1">Tab #1</a></li>
            <li><a href="#tabs-2">Tab #2</a></li>
        </ul>
        <div id="tabs-1">
            Tab #1 content goes here
        </div>
        <div id="tabs-2">
            {{view SN.Tab2View controllerBinding="SN.tab2Controller"}}
        </div>
    </div>
</script>

The embedded view has a button that opens a popup like this:

<script type="text/x-handlebars" data-template-name="Tab2">
    <br/>
    <button type="button" {{action addDocument target="controller"}}>Add New Document</button>

    <br/><br/>
    Tab #2 content goes here
</script>

Full working sample is published here http://jsbin.com/egizit/2/

The steps to recreate the problem are:

• Open the URL. A login popup appears.
• Click on 'Login' (no need to enter any username/password). Tabs widget appears.
• Click on 'Add New Document'. Add New Document popup appears.
• Click on 'Cancel'. The Add New Document popup disappears.
• Hover over 'Add New Document' button.

PROBLEM: Ember breaks with 'action is undefined' error.

This issue is discussed here: http://stackoverflow.com/questions/14048030/emberjs-breaks-with-action-is-undefined

... and here: #1571

However this problem seems different than the closed issue in #1571

[sly7-7]

Perhaps it's the same, since #1571 is a PR which has not been merged.

[kalien]

I tried the fix proposed in #1571 but it didn't solve the issue.

I debugged the issue up to the point where I realized that Views sometimes have wrong children listed in their '_childViews' attribute. In my case when the "Add New Document" popup appears its forEachChildView method gets called. At this point in time its '_childViews' attribute contains wrong views and Ember unregisters all actions within these views (including the "Add New Document" button action). Therefore "Add New Document" button doesn't have an action associated with it any more.

This is not a timing issue where the framework tries to deal with just removed views. The wrong children listed in '_childViews' are incorrectly set since the creation of the view. This view represents "Add New Document" popup i.e. the UploadDocumentView. The wrong views in '_childViews' belong to 'body' outlet however UploadDocumentView belongs to 'popup' outlet. It doesn't make sense the '_childViews' list of UploadDocumentView to have views which belong to outlet different than the outlet UploadDocumentView belongs to.

[krisselden]

@kalien my guess is something you are doing is altering the DOM outside of the normal view DOM management, maybe a plugin?

Issue #1571 has to do with jQuery synthesis of focus events synchronously during DOM manipulation.

[wagenet]

@kalien I suspect @kselden is right. If you can ensure that it's not another plugin please let us know and we can revisit this.