Merge pull request #309 from keylimetoolbox/quote_radio_value

Escape quotes in value for radio matcher
nytimes · Sep 28, 2016 · 780b7f7 · 780b7f7
2 parents 16b72c7 + a5beff3
commit 780b7f7
Show file tree

Hide file tree

Showing 4 changed files with 9,342 additions and 7,797 deletions.
diff --git a/backbone.stickit.js b/backbone.stickit.js
@@ -449,7 +449,11 @@
     selector: 'input[type="radio"]',
     events: ['change'],
     update: function($el, val) {
-      $el.filter('[value="'+val+'"]').prop('checked', true);
+      // Because we use " in the value descriptor, we need to escape any
+      // quotes in the value itself otherwise jQuery/Sizzle complain that
+      // the selector is invalid.
+      var escapedVal = val.toString().replace(/"/g, '\\"');
+      $el.filter('[value="'+escapedVal+'"]').prop('checked', true);
     },
     getVal: function($el) {
       return $el.filter(':checked').val();

diff --git a/test/bindData.js b/test/bindData.js
@@ -108,6 +108,9 @@ $(document).ready(function() {
 
     view.$('.test4[value=fountain]').prop('checked', true).trigger('change');
     assert.equal(model.get('water'), 'fountain');
+
+    model.set({'water':'"Fountain of Youth"'});
+    assert.equal(view.$('.test4:checked').val(), '"Fountain of Youth"');
   });
 
   QUnit.test('div', function(assert) {

diff --git a/test/index.html b/test/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <title>Backbone.Stickit Test Suite</title>
+  <meta charset="UTF-8">
 
 	<link rel="stylesheet" href="vendor/qunit.css" type="text/css"/>
 
@@ -44,6 +45,7 @@ <h1>Test</h1>
 	<script id="jst4" type="text/jst">
 		<input type="radio" name="water" value="fountain" class="test4">
 		<input type="radio" name="water" value="evian" class="test4">
+		<input type="radio" name="water" value='"Fountain of Youth"' class="test4">
 	</script>
 
 	<script id="jst5" type="text/jst"><div id="test5"></div></script>