(de)serialize contenteditable elements

Form elements are now fetched with `Syphon.InputFetcher`, instead of
the private `getForm` function. By default, this will fetch `contenteditable`
elements in addition to inputs and checkboxes.

"Content editable" fields are handled as follows:

* must have `contenteditable="true"` (having only `contenteditable` present
    is *NOT* sufficient, even though it conforms to the HTML spec)
* must define a `data-name` property, which is used like a standard `input`
    field's `name` property
* data in read/written using jQuery's `html()` method

apidoc.md

@@ -4,6 +4,12 @@ The document is the primary source for the API that Syphon
 exposes, and provides information on how to correctly override
 and configure the behaviors of Syphon.
 
+## Syphon.InputFetcher
+
+Determines the input elements present in the form (or view).
+The default implementation will return elements of type `input`
+as well as elements with `contenteditable="true"`.
+
 ## Syphon.KeyExtractorSet (Key Extractors)
 
 When a form is serialized, all of the input elements are 
@@ -37,14 +43,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 +63,8 @@ will produce this result, when serialized:
 ```js
 {
  foo: "bar",
- chk: true
+ chk: true,
+ editor: "my text"
 }
 ```
 
@@ -138,6 +149,9 @@ jQuery's `val()` method. The checkbox reader, however, looks
 for whether or not the checkbox is checked and returns a
 boolean value.
 
+In addition, the input reader will handle elements that are
+`contenteditable="true"` using jQuery's `html()` method.
+
 ### Default Input Reader Set
 
 Syphon comes with a default input reader set in the
@@ -201,6 +215,9 @@ every form of input using jQuery's `val()` method. The checkbox reader,
 sets whether or not the checkbox is checked, and the radio writer will
 select the correct radio button in a radio button group.
 
+In addition, the input writer will handle elements that are
+`contenteditable="true"` using jQuery's `html()` method.
+
 ### Default Input Writer Set
 
 Syphon comes with a default input writer set in the

readme.md

@@ -440,6 +440,7 @@ There some known limitations in Backbone.Syphon, partially by design and partial
 
 * An input of type `checkbox` will return a boolean value. This can be overriden by replacing the Input Reader for checkboxes.
 * Yo avoid circular references, care should be taken when using Backbone.Relational. See (#33)[https://github.com/marionettejs/backbone.syphon/issues/33].
+* `contenteditable` fields will only be processed if they are explicitly assigned the `true` value: `contenteditable="true"`.
 
 ## Building Backbone.Syphon
 

spec/javascripts/deserialize.spec.js

@@ -69,6 +69,30 @@ describe('deserializing an object into a form', function() {
  });
  });
 
+ describe('when deserializing into a "contenteditable" element', function() {
+ beforeEach(function() {
+ this.View = Backbone.View.extend({
+ render: function() {
+ this.$el.html(
+ '<form>' +
+ '<div data-name="foo" contenteditable="true"></div>' +
+ '</form>'
+ );
+ }
+ });
+
+ this.view = new this.View();
+ this.view.render();
+
+ Backbone.Syphon.deserialize(this.view, {foo: '<em>bar</em>'});
+ this.result = this.view.$('div[data-name=foo]').html();
+ });
+
+ it('should set the element\'s value to the corresponding value in the given object', function() {
+ expect(this.result).to.equal('<em>bar</em>');
+ });
+ });
+
  describe('when deserializing into a select box', function() {
  beforeEach(function() {
  this.View = Backbone.View.extend({

spec/javascripts/serialize.spec.js

@@ -268,6 +268,41 @@ describe('serializing a form', function() {
  });
  });
 
+ describe('when serializing contenteditable elements', function() {
+ beforeEach(function() {
+ this.View = Backbone.View.extend({
+ render: function() {
+ this.$el.html(
+ '<form>' +
+ '<div data-name="foo" contenteditable="true">bar</div>' +
+ '<span data-name="fu" contenteditable="true">baz</span>' +
+ '<div data-name="trap" >bar</div>' +
+ '<span data-name="trapAgain" >baz</span>' +
+ '</form>'
+ );
+ }
+ });
+
+ this.view = new this.View();
+ this.view.render();
+
+ this.result = Backbone.Syphon.serialize(this.view);
+ });
+
+ it('should return the value of a contenteditable "div" element', function() {
+ expect(this.result.foo).to.equal('bar');
+ });
+
+ it('should return the value of a contenteditable "span" element', function() {
+ expect(this.result.fu).to.equal('baz');
+ });
+
+ it('should ignore elements that are not "contenteditable"', function() {
+ expect(this.result.trap).to.be.undefined;
+ expect(this.result.trapAgain).to.be.undefined;
+ });
+ });
+
  describe('when the view is actually a form', function() {
  beforeEach(function() {
  this.View = Backbone.View.extend({

src/backbone.syphon.inputfetcher.js

@@ -0,0 +1,14 @@
+// Backbone.Syphon.InputFetcher
+// ----------------------------
+
+// If a dom element is given, just return the form fields and
+// elements with "contenteditable".
+// Otherwise, get the form fields (and contenteditable elements) from the view.
+Syphon.InputFetcher = function(viewOrForm) {
+ var inputs = ':input, [contenteditable=true]';
+ if (_.isUndefined(viewOrForm.$el)) {
+ return $(viewOrForm).find(inputs);
+ } else {
+ return viewOrForm.$(inputs);
+ }
+};

src/backbone.syphon.inputreaders.js

@@ -11,7 +11,12 @@ var InputReaders = Syphon.InputReaders = new InputReaderSet();
 // The default input reader, which uses an input
 // element's "value"
 InputReaders.registerDefault(function($el) {
- return $el.val();
+ var editableProp = $el.attr('contenteditable');
+ if (('' + editableProp).toLowerCase() !== 'true') {
+ return $el.val();
+ } else {
+ return $el.html();
+ }
 });
 
 // Checkbox reader, returning a boolean value for

src/backbone.syphon.inputwriters.js

@@ -11,7 +11,11 @@ var InputWriters = Syphon.InputWriters = new InputWriterSet();
 // The default input writer, which sets an input
 // element's "value"
 InputWriters.registerDefault(function($el, value) {
- $el.val(value);
+ if (('' + $el.attr('contenteditable')).toLowerCase() !== 'true') {
+ $el.val(value);
+ } else {
+ $el.html(value);
+ }
 });
 
 // Checkbox writer, set whether or not the checkbox is checked

src/backbone.syphon.js

@@ -87,7 +87,7 @@ Syphon.deserialize = function(view, data, options) {
 // Retrieve all of the form inputs
 // from the form
 var getInputElements = function(view, config) {
- var formInputs = getForm(view);
+ var formInputs = config.inputFetcher(view);
 
  formInputs = _.reject(formInputs, function(el) {
  var reject;
@@ -143,28 +143,20 @@ var getElementType = function(el) {
  return type.toLowerCase();
 };
 
-// If a dom element is given, just return the form fields.
-// Otherwise, get the form fields from the view.
-var getForm = function(viewOrForm) {
- if (_.isUndefined(viewOrForm.$el)) {
- return $(viewOrForm).find(':input');
- } else {
- return viewOrForm.$(':input');
- }
-};
-
 // Build a configuration object and initialize
 // default values.
 var buildConfig = function(options) {
  var config = _.clone(options) || {};
 
  config.ignoredTypes = _.clone(Syphon.ignoredTypes);
- config.inputReaders = config.inputReaders || Syphon.InputReaders;
- config.inputWriters = config.inputWriters || Syphon.InputWriters;
- config.keyExtractors = config.keyExtractors || Syphon.KeyExtractors;
- config.keySplitter = config.keySplitter || Syphon.KeySplitter;
- config.keyJoiner = config.keyJoiner || Syphon.KeyJoiner;
- config.keyAssignmentValidators = config.keyAssignmentValidators || Syphon.KeyAssignmentValidators;
+ // for each propery, attempt to use the value defined on 'config',
+ // fallback to default value defined on 'Syphon'
+ // (loop so jshint doesn't complain about cyclomatic complexity)
+ _.each(['inputFetcher', 'inputReaders', 'inputWriters', 'keyExtractors',
+ 'keySplitter', 'keyJoiner', 'keyAssignmentValidators'], function(prop) {
+ var capitalized = prop.charAt(0).toUpperCase() + prop.slice(1);
+ config[prop] = config[prop] || Syphon[capitalized];
+ });
 
  return config;
 };

src/backbone.syphon.keyextractors.js

@@ -11,5 +11,5 @@ var KeyExtractors = Syphon.KeyExtractors = new KeyExtractorSet();
 // 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') || '';
 });

src/build/backbone.syphon.js

@@ -30,6 +30,7 @@
  // @include ../backbone.syphon.js
  // @include ../backbone.syphon.typeregistry.js
  // @include ../backbone.syphon.keyextractors.js
+ // @include ../backbone.syphon.inputfetcher.js
  // @include ../backbone.syphon.inputreaders.js
  // @include ../backbone.syphon.inputwriters.js
  // @include ../backbone.syphon.keyassignmentvalidators.js