Metamorph error when trying to save record

Question

I'm getting a strange error when I'm trying to save some data.

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.

I've noticed something weird in the actual DOM

<h1>Posts page</h1>
<script id="metamorph-2-start" type="text/x-placeholder"></script>
<script id="metamorph-2-start" type="text/x-placeholder"></script>
<p>...</p>
...
<button data-ember-action="5" class="btn btn-warning">Cancel</button>
<script id="metamorph-2-end" type="text/x-placeholder"></script>
<table class="table table-striped table-hover>

There are two of the same metamorph tags and only one end tag. I've also tried not using the partial (ie having the code sit in the dom). While the duplicate metamorph start tag disappears, when trying to save, the metamorph tag its trying to reference doesn't exist.

Here is a JSBin of my code. the JSBin works, which is promising. The only difference between the jsbin and my code is that I'm using Ember App Kit. My guess is I'm doing something wrong with the ES6 setup. I've posted my controller code here

var IndexController = Ember.ArrayController.extend({
  addingNew: false,
  actions: {
    createAccount: function() {
      var account = this.store.createRecord('account', {
        name: 'howdy',
      });
      account.save();
    },
    showNew: function() {
      this.set('addingNew', true);
    },
    cancelNew: function() {
      this.set('name', '');
      this.set('addingNew', false);
    }
  }
});

export default IndexController;

What am I doing wrong to get this error?

Answer 1

I've run into this before when I have html comments enclosing ember tags. Something like:

<!-- {{#if something}}X{{else}}Y{{/if}} -->