在Ember中，如何绑定名称中有冒号的属性？

Question

我想创建一个组件，其根元素是

<svg width='150px'
     height='150px'
     viewBox='0 0 150 150'
     version='1.1'
     xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'>

我可以使用简单的属性绑定来设置其中的大部分：

Ember.Component.extend({
  attributeBindings: [ 'height', 'version', 'viewBox', 'width', 'xmlns' ],
  tagName: 'svg',
  height: '150px',
  version: '1.1',
  viewBox: '0 0 150 150',
  width: '150px',
  'xmlns:xlink': 'http://www.w3.org/2000/svg'
});

行不通的是 xmlns:xlink。如果我尝试将其添加为属性绑定，Ember 会将冒号解释为表示 将 xlink 属性绑定到 xmlns 属性[ 的值=26=] 所以我得到

<svg width='150px' height='150px' viewBox='0 0 150 150' version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/2000/svg'>

如何为此属性设置属性绑定？

Answer 1

您可以如下使用

attributeBindings: ['xlink:xmlns:xlink'],
xlink: 'http://www.w3.org/1999/xlink'

这应该会在您的组件中生成 xmlns:xlink="http://www.w3.org/1999/xlink"。

Here is the working demo.

在Ember中，如何绑定名称中有冒号的属性？

In Ember, how do I bind an attribute whose name has a colon?

xml

svg

ember.js

ember-components