Merge pull request #10365 from oneeman/bind-namespaced-attributes

[BUGFIX] Handle binding namespaced attributes (#9298)

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

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({