Question

我正在尝试构建一个由svg标签组成的Ember组件。目标是由Handlebars模板驱动d3可视化，并由组件处理动态更改。我遇到了一个问题。

我的视图模板如下：

<script type="text/x-handlebars">
    {{the-parent data=data}}
</script>

组件模板如下：

<script type="text/x-handlebars" id="components/the-parent">
    <svg {{bind-attr width=width height=height}}>
        <g {{bind-attr transform=transform}}>
            {{#each data}}
                {{the-child text=text}}
            {{/each}}
        </g>
    </svg>
</script>

<script type="text/x-handlebars" id="components/the-child">
    <text>Hello</text>
</script>

父组件定义如下：

App.TheParentComponent = Ember.Component.extend({
    height: function() {
        ...
    }.property(...),

    width: function() {
        ...
    }.property(...),

    transform: function() {
        ...
    }.property(...)
});

我收到以下错误：

Assertion Failed: The metamorph tags, metamorph-93-start and metamorph-93-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...<omitted>...')

如果在父组件模板中使用div标签替换svg标签，并使用ul标签替换g标签，并在子组件模板中将文本标签替换为li标签，则它可以正常工作。

知道发生了什么事吗？

编辑：

失败的具体断言如下：

function _addMetamorphCheck() {
      EachView.reopen({
        _checkMetamorph: 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
          );
        })
      });
    }

如果失败，document.getElementById( this.morph.start ).parentNode的值为＆＃34; g＆＃34;并且document.getElementById( this.morph.end ).parentNode的值是＆＃34; div＃ember521.ember-view＆＃34;，后者是父组件本身的div标签，因此svg标签的父标签。我检查了所有标签后三倍，我非常确定没有任何标签保持未闭合状态。

Answer 1

找到解决方案！诀窍是不在<script type="text/x-handlebars" id="components/the-child"></script>中使用Handlebars。在tagName挂钩下的组件定义中定义标记，并通过attributeBinding挂钩绑定任何属性。有关可行的解决方案，请参阅this jsbin。这样做的原因是模板引擎不会添加这些奇怪的变形标记。

SVG标记内的Ember嵌套组件引发错误

1 个答案: