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

Question

I want to create a component whose root element is

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

I can set most of those up with simple attribute bindings:

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

The one that won't work is xmlns:xlink. If I try to add that as an attribute binding, Ember interprets the colon to mean bind the xlink attribute to the value of the xmlns property so I get

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

How can I set up an attribute binding for this property?

Answer 1

You can use it as below

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

This should generate xmlns:xlink="http://www.w3.org/1999/xlink" in your component.

Here is the working demo.