From 4e046aa83912bff851794fa036205ed3f3eb5867 Mon Sep 17 00:00:00 2001
From: Or Neeman <oneeman@gmail.com>
Date: Thu, 5 Feb 2015 19:53:35 -0600
Subject: [PATCH] [BUGFIX] Handle binding namespaced attributes (#9298)

---
 packages/ember-views/lib/views/view.js        | 30 ++++++++++++++++---
 .../views/view/attribute_bindings_test.js     | 16 ++++++++++
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/ember-views/lib/views/view.js b/packages/ember-views/lib/views/view.js
index eba14ef279c..4bbc7fd9034 100644
--- a/packages/ember-views/lib/views/view.js
+++ b/packages/ember-views/lib/views/view.js
@@ -688,6 +688,22 @@ var TemplateRenderingSupport = Mixin.create({
   <a id="ember1" class="ember-view" href="http://google.com"></a>
   ```
 
+  Namespaced attributes (e.g. `xlink:href`) are supported, but have to be
+  mapped, since `:` is not a valid character for properties in Javascript:
+
+  ```javascript
+  UseView = Ember.View.extend({
+    tagName: 'use',
+    attributeBindings: ['xlinkHref:xlink:href'],
+    xlinkHref: '#triangle'
+  });
+  ```
+  Will result in view instances with an HTML representation of:
+
+  ```html
+  <use xlink:href="#triangle"></use>
+  ```
+
   If the return value of an `attributeBindings` monitored property is a boolean
   the property will follow HTML's pattern of repeating the attribute's name as
   its value:
@@ -1432,18 +1448,24 @@ var View = CoreView.extend(ViewStreamSupport, ViewKeywordSupport, ViewContextSup
 
     @method _applyAttributeBindings
     @param {Ember.RenderBuffer} buffer
+    @param {Array} attributeBindings
     @private
   */
   _applyAttributeBindings: function(buffer, attributeBindings) {
     var unspecifiedAttributeBindings = this._unspecifiedAttributeBindings = this._unspecifiedAttributeBindings || {};
 
-    var binding, split, property, attrName, attrNode, attrValue;
+    var binding, colonIndex, property, attrName, attrNode, attrValue;
     var i, l;
     for (i=0, l=attributeBindings.length; i<l; i++) {
       binding = attributeBindings[i];
-      split = binding.split(':');
-      property = split[0];
-      attrName = split[1] || property;
+      colonIndex = binding.indexOf(':');
+      if (colonIndex === -1) {
+        property = binding;
+        attrName = binding;
+      } else {
+        property = binding.substring(0, colonIndex);
+        attrName = binding.substring(colonIndex + 1);
+      }
 
       Ember.assert('You cannot use class as an attributeBinding, use classNameBindings instead.', attrName !== 'class');
 
diff --git a/packages/ember-views/tests/views/view/attribute_bindings_test.js b/packages/ember-views/tests/views/view/attribute_bindings_test.js
index 3882c7a7725..128a0a594d4 100644
--- a/packages/ember-views/tests/views/view/attribute_bindings_test.js
+++ b/packages/ember-views/tests/views/view/attribute_bindings_test.js
@@ -193,6 +193,22 @@ QUnit.test("should update attribute bindings with micro syntax", function() {
   ok(!view.$().prop('disabled'), "updates disabled property when false");
 });
 
+QUnit.test("should allow namespaced attributes in micro syntax", function () {
+  view = EmberView.create({
+    attributeBindings: ['xlinkHref:xlink:href'],
+    xlinkHref: '/foo.png'
+  });
+
+  run(function() {
+    view.createElement();
+  });
+  equal(view.$().attr('xlink:href'), '/foo.png', "namespaced attribute is set");
+
+  run(function () {
+    view.set('xlinkHref', '/bar.png');
+  });
+  equal(view.$().attr('xlink:href'), '/bar.png', "namespaced attribute is updated");
+});
 
 QUnit.test("should update attribute bindings on svg", function() {
   view = EmberView.create({