Question

Using Ember 0.9.7.1

Getting this error in IE8 and below when my app starts up and the first state is entered. I have a fairly large app, so I’m not sure I can reproduce in a jsFiddle, but I’ll try to show the pertinent bits below.

I’ve viewed these similar issues on GitHub, but I don’t think either describes exactly what I’m doing wrong (it HAS to be me… right? :))

https://github.com/emberjs/ember.js/issues/752
https://github.com/emberjs/ember.js/issues/447

My app’s initial view is created/loaded by a state manager, like so:

SYOS.stateManager = Em.StateManager.create({

    enableLogging: true,
    rootElement: #syos-root,
    initialState: 'noSectionSelected',

    noSectionSelected: Ember.ViewState.create({

        view: SYOS.SelectSectionView,

        chooseSection: function (manager, context) {

            manager.goToState('sectionSelected');

        }

    }),
<snip>

That view is basically defined as:

SYOS.SelectSectionView = Em.View.extend({

templateName: 'selectSectionView',
sectionsBinding: 'SYOS.sectionController.sections'
});

A stripped down version of the template looks like this:

<script type="text/x-handlebars" data-template-name="selectSectionView">

<h2>Some markup</h2>

<table class="select-sect" cellspacing="0">
{{#each sections}}
    {{#view SYOS.SelectSectionRowView sectionBinding="this" tagName="tr"}}
    <td class="sect">{{section.name}}</td>
    {{/view}}
{{/each}}
</table>

</script>

This template is defined directly in my html if that helps.

When I load the page the console log displays:

LOG: STATEMANAGER: Entering noSectionSelected 
SCRIPT438: Object doesn't support this property or method 
ember-0.9.7.1.min.js, line 10 character 30680
SCRIPT5022: Cannot perform operations on a Metamorph that is not in the DOM. 
ember-0.9.7.1.min.js, line 13 character 29412
SCRIPT5022: Exception thrown and not caught 
ember-0.9.7.1.min.js, line 13 character 16607

Using IE’s debugger (eww) to break on the first error, I can see that the error seems to be occurring for the #each metamorph tag. It breaks on this line:

g.prototype.checkRemoved=function(){if(this.isRemoved())throw new Error("Cannot perform operations on a Metamorph that is not in the DOM.")}

because this.isRemoved() is returning true. Inspecting this in the debugger I see that this.start == “metamorph-6-start”. If I search for that metamorph tag in a working browser it appears to be the start tag of the #each block in my template.

The sectionsBinding is an array that is loaded from a jQuery .ajax call, so initially it would be [] and then get populated using this.get('sections').pushObject(section); while looping the results of the ajax call in my controller.

I’m not doing any dynamic view appending or removing during this state, it just needs to load the view and bind the sections when they come back from the ajax service call.

Can anyone kindly point me in right direction on this one? Thanks!

EDIT: Updated to Ember 0.9.8.1 and now have one less error in the console:

LOG: STATEMANAGER: Entering noSectionSelected 
SCRIPT5022: Cannot perform operations on a Metamorph that is not in the DOM. 
ember-0.9.8.1.min.js, line 14 character 4051
SCRIPT438: Object doesn't support this property or method 
ember-0.9.8.1.min.js, line 10 character 31677

Answer 1

Following up on this to give any googlers out there what I had to do to resolve this.

In short – I solved this by completely reworking my views an how they’re added to app.

I want to HIGHLY recommend that anyone experiencing weirdness with an Ember app run their app using the Debug version of Ember. The assertions and feedback provided in the console is invaluable.

I actually had 2 issues going on:

1) In the #each that builds the table above, I had a with another #each where I used a bound handlebars helper (found on http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/ and very, very useful).

Since this was nested so deep, I had to call my bound helper using {{ boundHelper this}}, which really seemed to throw things off. Chrome, Firefox, and IE9 didn’t seem to choke on this – not sure why. But basically using the bound helper with this ended up passing a '' to normalizePath, and caused this assertion to fail

function normalizePath(path) {
  Ember.assert('must pass non-empty string to normalizePath()', path && path!=='');

I worked around this issue by changing my boundHelper to function on either an array of values or a single value so I could write it as {{boundHelper colors}} and loop in my helper rather than using #each.

2) So, one issue down, but still getting the original metamorph error. With the other error cleared, I could now tell that the metamorph error was coming from another view altogether.

I had 2 nested views that were defined in my HTML using the #view helper. Somehow, the nested view was causing the parent to rerender. Again, the debug build of Ember was a nice tool to track this down as it logged a message in the console about it.

I’m not 100% sure why this is such an issue, but it seems like during the rerender the metamorph tags aren’t there and it throws a fit. This does seem like it could potentially be a bug in Ember, but it’s even more likely I just wasn’t doing something the “Ember way.” As nice as Ember is, it’s also easy to shoot your foot off 🙂

I ended up making these inline views into Handlebars templates and appending the views to the DOM in the Ember App.ready function. This cleared all errors and IE 7 & 8 can now render the app without error.