使用 Ember/Handlebars 插入 SVG 元素时出现 DOM 异常 9

Question

我在使用带有 SVG 元素的 Ember/Handlebars 时遇到问题：

控制器：

display: function() {
  this.set('isDisplayed', true);
}

模板：

<button {{action display}}>Display</button>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  {{#if isDisplayed}}
    <text>Foo</text>
  {{/if}}
</svg>

当我单击按钮时，我收到此错误：Uncaught Error: NotSupportedError: DOM Exception 9（ember.js:18709: Metamorph#htmlFunc 在 createContextualFragment 行上）

Ember/Handlebars 是否正确处理 SVG？我应该怎么做才能完成这项工作？

[编辑] 一个小 JSBin 来看看这个：http://jsbin.com/onejec/2/edit

Answer 1

如果您想依靠 ember 为您呈现 DOM 元素，那么处理 SVG 会有些棘手。 但作为起点，您可以考虑创建一个像这样的 svg 包装器：

App.SVGView = Ember.View.extend({
  tagName: 'svg',
  attributeBindings: ['height', 'width', 'xmlns', 'version'],
  height: 100,
  width: 100,
  xmlns: 'http://www.w3.org/2000/svg',
  version: '1.1',
  render: function(buffer) {
    return buffer.push('<text x="20" y="20" font-family="sans-serif" font-size="20px">Foo!</text>');
  }
});

然后钩入render方法来注入你的text标签。

这会产生以下 HTML 标记：

<svg id="svg_view" class="ember-view" height="100" width="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="20" y="20" font-family="sans-serif" font-size="20px">Foo!</text>
</svg>

这里还有你的工作修改jsbin。

编辑 如果您需要基于某些可能更改的属性来 re-render 视图，您可以将 observer 添加到对应属性并在该方法中调用 this.rerender()，如下所示：

App.SVGView = Ember.View.extend({
  tagName: 'svg',
  attributeBindings: ['height', 'width', 'xmlns', 'version'],
  height: 100,
  width: 100,
  xmlns: 'http://www.w3.org/2000/svg',
  version: '1.1',
  render: function(buffer) {
    return buffer.push('<text x="20" y="20" font-family="sans-serif" font-size="20px">Foo!</text>');
  },
  myProperty: 'This value might change',
  myPropertyChanged: function() {
    this.rerender();
  }.observes('myProperty')
});

希望对你有帮助。