Uncaught Error: Assertion Failed: The metamorph tags, metamorph-28-start and metamorph-28-end, have different parents

Question

Uncaught Error: Assertion Failed: The metamorph tags, metamorph-28-start and metamorph-28-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 a TBODY tag when creating a table with '{{#each}}')

Code Snippet:

<div class="panel-body">
<div class="row">
{{#each}}
  <div class="col-xs-3">
    <label class="control-label">{{fieldname}}</label>
  </div>
  {{#if fullcolumn}}
      <div class="col-xs-9">
        <input type="text" class="form-control" placeholder="full">
      </div>
  {{else}}
      <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="half">
      </div>
  {{/if}}
  {{#if newrow}} 
      </div>
      <div class="row">
  {{/if}}
{{/each}}
</div>
</div>

Guide me what i am wrong in this code?

My Requirement is:

Hi, i have the requirement to display fields details in two column table. For example

Field1   Elt1        Field2    Elt2
Field3   Elt3
Field4   Elt4        Field5    Elt5

I have array of fields,

[
  {
    "fieldname":"Field1",
    .
    .
  },
  {
    .
    .
  },
  .
  .
  .
]

How could achieve this?

Hyder Hyder · Accepted Answer · 2014-09-03T07:22:09

{{#if newrow}}   
      </div>  
      <div class="row">
{{/if}}

This is the problematic code. The div outside each is closed inside it.

This check was brought by this MR: https://github.com/emberjs/ember.js/pull/4404

You should not close the tag opened outside an each inside it.

Uncaught Error: Assertion Failed: The metamorph tags, metamorph-28-start and metamorph-28-end, have different parents

2 Answers