CODEWITHSUNDEEP
htmlember.jshandlebars.js
Daniel Revell
Daniel Revell

Reputation: 8586

Ember.js: The metamorph tags have different parents

I'm following a video tutorial for Ember.js and there's this one bit of a template that's throwing an error for me.

<script type="text/x-handlebars" id="repositories">
    <table class="table table-striped">
        {{#each}}<tr><td>{{name}}</td></tr>{{/each}}
    </table>
</script>

Uncaught Error: Assertion Failed: The metamorph tags, metamorph-27-start and metamorph-27-end, have different parents. The browser has fixed your template to output valid HTML (for example, check that you have properly closed all tags and have used......')

Being new to ember, I don't have the foggiest what this means. So I've played with some versions of this to see what works.

Errors

{{#each}}<tr><td>test</td></tr>{{/each}}

{{#each}}<tr>test</tr>{{/each}}

{{#each}}<td>test</td>{{/each}}

Works

{{#each}}test{{/each}}

{{#each}}{{name}}{{/each}}

{{#each}}<li>test</li>{{/each}}

{{#each}}<li><span>test</span></li>{{/each}}

<tr>{{#each}}<td>{{name}}</td>{{/each}}</tr>

I've copied this from a great training video on Pluralsight (Ember.js Fundamentals by Rob Conery). It appears to work for him so, either I've copied something wrong or the framework has changed in the later version I'm running.

Hoping someone can help on this. Thanks

UPDATE

I'm running against the debug version of ember. The line that's breaking is

Ember.assert = function(desc, test) {
  if (!test) {
    throw new Ember.Error("Assertion Failed: " + desc);
  }
};

and the test itself

function _addMetamorphCheck() {
  Ember.Handlebars.EachView.reopen({
    _checkMetamorph: Ember.on('didInsertElement', function() {
      Ember.assert("The metamorph tags, " +
                   this.morph.start + " and " + this.morph.end +
                   ", have different parents.\nThe browser has fixed your template to output valid HTML (for example, check that you have properly closed all tags and have used a TBODY tag when creating a table with '{{#each}}')",
        document.getElementById( this.morph.start ).parentNode ===
        document.getElementById( this.morph.end ).parentNode
      );
    })
  });
}

The comment for this goes on to say:

Ember build tools will remove any calls to Ember.assert() when doing a production build.

So this might not be a problem in non debug files.. but it still doesn't account for the test failing on this, unless the test itself is bad?

Upvotes: 1

Views: 916

Answers (2)

melc
melc

Reputation: 11671

It looks ok if the contents are wrapped inside a tbody element,

http://emberjs.jsbin.com/povovudo/1/edit

hbs

<script type="text/x-handlebars" data-template-name="index">
    <table>
    <tbody>
    {{#each}}<tr><td>{{name}}</td></tr>{{/each}}
    </tbody>
    </table>
  </script>

If a tbody element is not placed, then hbs seems to enter one automatically and maybe it is related to this error.

Upvotes: 5

user3710253
user3710253

Reputation: 1

Longshot here - maybe try your code on separate lines?

<script type="text/x-handlebars" id="repositories">
  <table class="table table-striped">
    {{#each}}
      <tr><td>{{name}}</td></tr>
    {{/each}}
  </table>
</script>

This shouldn't be a problem, but basically the metamorph thing is Ember/Handlebars way of binding/change tracking and it needs to see individual elements.

Upvotes: 0

Related Questions