add support of "update" method to attribute's config

nytimes#212 nytimes#204
husa · Feb 25, 2015 · 2ae743e · 2ae743e
1 parent 13d9b75
commit 2ae743e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 5 deletions.
diff --git a/backbone.stickit.js b/backbone.stickit.js
@@ -335,12 +335,16 @@
         var updateType = _.contains(props, attrConfig.name) ? 'prop' : 'attr',
             val = getAttr(model, observed, attrConfig);
 
-        // If it is a class then we need to remove the last value and add the new.
-        if (attrConfig.name === 'class') {
-          $el.removeClass(lastClass).addClass(val);
-          lastClass = val;
+        if (attrConfig.update) {
+          applyViewFn.call(view, attrConfig.update, $el, val, model, attrConfig);
         } else {
-          $el[updateType](attrConfig.name, val);
+          // If it is a class then we need to remove the last value and add the new.
+          if (attrConfig.name === 'class') {
+            $el.removeClass(lastClass).addClass(val);
+            lastClass = val;
+          } else {
+            $el[updateType](attrConfig.name, val);
+          }
         }
       };
 

diff --git a/test/bindData.js b/test/bindData.js
@@ -1411,6 +1411,55 @@ $(document).ready(function() {
     equal(view.$('#test5').attr('data-name'), '_evian_water');
   });
 
+  test('bindings:attributes:udpate', function() {
+    model.set({'box':'0 0 100 100'});
+    view.model = model;
+    view.templateId = 'jst27';
+    view.bindings = {
+      '#test27': {
+        attributes: [{
+          name: 'viewBox',
+          observe: 'box',
+          update: function($el, val, model, options) {
+            $el[0].setAttributeNS(null, 'viewBox', val);
+          }
+        }]
+      }
+    };
+
+    $('#qunit-fixture').html(view.render().el);
+
+    equal(view.$('#test27')[0].getAttributeNS(null, 'viewBox'), '0 0 100 100');
+
+    model.set('box', '100 100 200 200');
+    equal(view.$('#test27')[0].getAttributeNS(null, 'viewBox'), '100 100 200 200');
+  });
+
+  test('bindings:attributes:udpate (string)', function() {
+    model.set({'box':'0 0 100 100'});
+    view.model = model;
+    view.templateId = 'jst27';
+    view.updateByString = function($el, val, model, options) {
+      $el[0].setAttributeNS(null, 'viewBox', val);
+    };
+    view.bindings = {
+      '#test27': {
+        attributes: [{
+          name: 'viewBox',
+          observe: 'box',
+          update: 'updateByString'
+        }]
+      }
+    };
+
+    $('#qunit-fixture').html(view.render().el);
+
+    equal(view.$('#test27')[0].getAttributeNS(null, 'viewBox'), '0 0 100 100');
+
+    model.set('box', '100 100 200 200');
+    equal(view.$('#test27')[0].getAttributeNS(null, 'viewBox'), '100 100 200 200');
+  });
+
   test('bindings:attributes:observe', function() {
 
     model.set({'water':'fountain', 'candy':'twix'});

diff --git a/test/index.html b/test/index.html
@@ -181,6 +181,10 @@ <h1>Test</h1>
     </select>
   </script>
 
+  <script id="jst27" type="text/jst">
+    <svg id="test27" width="10" height="10"></svg>
+  </script>
+
 </body>
 
 </html>