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

【问题标题】：In Ember, how do I bind an attribute whose name has a colon?在 Ember 中，如何绑定名称带有冒号的属性？
【发布时间】：2016-02-07 07:19:11
【问题描述】：

我想创建一个根元素为的组件

<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 属性的值，这样我就得到了

<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'>

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

【问题讨论】：

也许你应该将属性命名为'xmlns:xlink': 'http://www.w3.org/2000/svg'
xmlns 属性不是真实的，它们是元素所在命名空间的表达式。例如，如果您更改 xmlns 值，则元素的命名空间不会改变。
我用 ''xlink:xmlns:xlink'' 绑定了值。这不是你需要的吗？ emberjs.jsbin.com/teteyu/2/edit?html,js,output
@Bek 我实际上做了并且在这里打错了。已编辑。
@blessenm 如果你把它写成答案，我会接受的！我认为这两个冒号会使 Ember 更加困惑，因此不予考虑。

标签： xml ember.js svg ember-components

【解决方案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.

【讨论】：