3

我在使用带有 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#htmlFunccreateContextualFragment 行上）

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

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

4

1 回答 1

2

如果您想依靠 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')
});

希望能帮助到你。

于 2013-06-16T19:01:51.590 回答