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 に答える