Ember.js:变形标签有不同的父母

Question

我正在关注Ember.js的视频教程,而且这是一个模板,它给我一个错误.

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

未捕获的错误:断言失败:变形标记,变形-27-start和变形-27-结尾,具有不同的父母.浏览器已修复您的模板以输出有效的HTML(例如,检查您是否已正确关闭所有标记并已使用......')

作为余烬的新手,我的意思并不是最模糊的.所以我玩了一些版本,看看它有什么作用.

错误

{{#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 Fundamentals)中复制了这个.它似乎对他有用,要么我复制了一些错误,要么在我正在运行的更高版本中框架已经改变.

希望有人可以帮助解决这个问题.谢谢

UPDATE

我正在运行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似乎自动输入一个元素,也许它与此错误有关.