插入带有余烬/把手的SVG元素时出现DOM异常9

我在使用带有SVG元素的余烬/把手时遇到问题：

控制器：

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>

显示
{{#如果显示}
福
{{/if}

当我点击按钮时，我得到了这个错误：

Uncaught错误：NotSupportedError:DOM异常9

（

ember.js:18709

：

transform\htmlFunc

，在createContextalFragment行上）

余烬/把手是否正确处理SVG？我该怎么做才能让它工作

---

[编辑]一点JSBin来了解这一点：

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

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

这里也修改了你的工作

编辑 如果需要基于某些可能更改的属性重新渲染视图，可以在相应的属性中添加一个观测者，并在该方法中调用

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

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

App.SVGView=Ember.View.extend({
标记名：“svg”，
属性索引：[“高度”、“宽度”、“xmlns”、“版本”]，
身高：100，
宽度：100，
xmlns:'http://www.w3.org/2000/svg',
版本：“1.1”，
渲染：函数（缓冲区）{
返回buffer.push（'Foo！'）；
},
myProperty:'此值可能会更改'，
myPropertyChanged:函数（）{
这个；
}.observes（'myProperty'）
});

---

希望有帮助。

如果必须在视图中观察多个属性，您是否能够做到这一点？我希望有一个始终呈现的SVG，但它的某些部分取决于属性。感谢您的回答和编辑！在Ember中支持SVG之前，这是一个很好的临时解决方案，如果需要的话。我真的很想拥有模板的强大功能（当属性发生变化时，只重新提交部分模板）。我编辑了我的答案，看一看。希望这有帮助。