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

希望它有所帮助。

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

1 个答案: