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（例如，检查您是否正确关闭了所有标签并拥有用于......'）

对于余烬的新手，我的意思并不是最模糊的。所以我玩了一些版本，看看它有用。

错误

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

希望有人可以提供帮助。感谢

更新

我正在运行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绑定/变化跟踪的方式，它需要看到单个元素。

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

2 个答案: