contenteditable support

apidoc.md

@@ -37,14 +37,18 @@ register new extractors as needed (see below).
 ### Default Key Extractor: element "name"
 
 The default key extractor uses the `name` attribute of the form's
-input element as the key.
+input element as the key. If the `name` property is undefined, it
+will fall back to using the `data-name` property (which should
+therefore be defined in order to use Syphon with non-input elements,
+e.g. a `div` with `contenteditable="true"`).
 
 For example, an HTML form that looks like this:
 
 ```html
 <form>
   <input name="foo" value="bar">
   <input type="checkbox" name="chk" checked>
+  <div data-name="editor" contenteditable="true">my text</div>
 </form>
 ```
 
@@ -53,7 +57,8 @@ will produce this result, when serialized:
 ```js
 {
   foo: "bar",
-  chk: true
+  chk: true,
+  editor: "my text"
 }
 ```
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "backbone.syphon",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Serialize a Backbone.View in to a JavaScript object.",
   "main": "./lib/backbone.syphon.js",
   "homepage": "https://github.com/marionettejs/backbone.syphon",

lib/backbone.syphon.js

@@ -1,7 +1,7 @@
-// Backbone.Syphon, v1.0.0
+// Backbone.Syphon, v0.8.0
 // ----------------------------------
 //
-// Copyright (c) 2016 Derick Bailey, Muted Solutions, LLC.
+// Copyright (c) 2018 Derick Bailey, Muted Solutions, LLC.
 // Distributed under MIT license
 //
 // http://github.com/marionettejs/backbone.syphon
@@ -27,7 +27,7 @@
 
   var Syphon = Backbone.Syphon = {};
 
-  Syphon.VERSION = '1.0.0';
+  Syphon.VERSION = '0.8.0';
 
   Syphon.noConflict = function() {
     Backbone.Syphon = previousSyphon;
@@ -173,6 +173,10 @@
       }
     }
 
+    if (('' + $el.attr('contenteditable')).toLowerCase() === 'true') {
+      type = 'contenteditable';
+    }
+
     // Always return the type as lowercase
     // so it can be matched to lowercase
     // type registrations.
@@ -183,9 +187,9 @@
   // Otherwise, get the form fields from the view.
   var getForm = function(viewOrForm) {
     if (_.isUndefined(viewOrForm.$el)) {
-      return $(viewOrForm).find(':input');
+      return $(viewOrForm).find(':input, [contenteditable]');
     } else {
-      return viewOrForm.$(':input');
+      return viewOrForm.$(':input, [contenteditable]');
     }
   };
 
@@ -371,7 +375,7 @@
   // The default key extractor, which uses the
   // input element's "name" attribute
   KeyExtractors.registerDefault(function($el) {
-    return $el.prop('name') || '';
+    return $el.prop('name') || $el.data('name') || '';
   });
 
   // Input Readers
@@ -390,6 +394,12 @@
     return $el.val();
   });
 
+  // contenteditable reader, which returns the HTML
+  // contained by the element
+  InputReaders.register('contenteditable', function($el) {
+    return $el.html();
+  });
+
   // Checkbox reader, returning a boolean value for
   // whether or not the checkbox is checked.
   InputReaders.register('checkbox', function($el) {
@@ -412,6 +422,12 @@
     $el.val(value);
   });
 
+  // contenteditable writer, which changes the HTML contained by
+  // the element
+  InputWriters.register('contenteditable', function($el, value) {
+    $el.html(value);
+  });
+
   // Checkbox writer, set whether or not the checkbox is checked
   // depending on the boolean value.
   InputWriters.register('checkbox', function($el, value) {
@@ -426,7 +442,8 @@
   // checked.  The button should only be checked if it's value
   // equals the given value.
   InputWriters.register('radio', function($el, value) {
-    $el.prop('checked', $el.val() === value.toString());
+    var checked = _.isUndefined(value) ? false : $el.val() === value.toString();
+    $el.prop('checked', checked);
   });
 
   // Key Assignment Validators