Ember.js：metamorph 标签有不同的父级

Question

我正在关注 Ember.js 的视频教程，但有一个模板给我带来了错误。

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

未捕获的错误：断言失败：变形标记， metamorph-27-start 和 metamorph-27-end，有不同的父母。这 浏览器已修复您的模板以输出有效的 HTML（例如， 检查您是否已正确关闭所有标签并已 用过......')

作为 ember 的新手，我不知道这意味着什么。所以我玩了这个的一些版本，看看有什么用。

错误

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

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

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

作品

{{#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>

我从关于 Pluralsight 的精彩培训视频（Rob Conery 的 Ember.js 基础知识）中复制了这一点。它似乎对他有用，要么我复制了错误的东西，要么框架在我运行的更高版本中发生了变化。

希望有人可以在这方面提供帮助。谢谢

更新

我正在运行 ember 的调试版本。断线是

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

以及测试本身

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
      );
    })
  });
}

对此的评论继续说：

Ember 构建工具将删除对 Ember.assert() 的任何调用 生产版本。

所以这在非调试文件中可能不是问题.. 但它仍然不能说明测试失败，除非测试本身不好？

Answer 1

如果内容被包裹在 tbody 元素中看起来没问题，

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>

如果没有放置tbody元素，那么hbs似乎会自动输入一个，可能与这个错误有关。

Answer 2

Longshot 在这里 - 也许在单独的行中尝试您的代码？

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

这应该不是问题，但基本上变形的东西是 Ember/Handlebars 的绑定/更改跟踪方式，它需要查看单个元素。