Backbone Forms: Nested Model List Editor

An example showing how to construct a Form that uses Nested Models which can be added with a List editor.

by Glen Pike

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://rawgithub.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://rawgit.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/powmedia/backbone-forms/master/distribution/templates/bootstrap3.js"></script>
<div class="panel panel-default panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Object List</h3>
  </div>
  <div id="object-list" class="panel-body">
  </div>
</div>

JavaScript

var itemToString, object_list_form;

Backbone.Form.editors.List.Modal.ModalAdapter = Backbone.BootstrapModal;

itemToString = function(value) {
  var safeString = '';
  Object.keys(value).forEach(function(key) {
  	safeString += key + ':' + $('<div>').html(value[key]).text() + '<br/>';
  });
  
  return safeString;
};

object_list_form = new Backbone.Form({
  schema: {
    users: {
      type: 'List',
      itemType: 'Object',
      itemToString: itemToString,
      subSchema: {
        name: {}
      }
    }
  },
  data: {
    users: [
      {
        name: '<a href="#">malicious injection</a>'
      }
    ]
  }
});

$('#object-list').html(object_list_form.render().el);