backbone-forms, 517

by sniederb

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 id="form_target">

</div>
<button id="btnRun">
  Run setValues
</button>

CSS

/* Date */

.bbf-date .bbf-date {
  width: 4em
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 5em;
}


/* DateTime */

.bbf-datetime select {
  width: 4em;
}


/* List */

.bbf-list .bbf-add {
  margin-top: -10px
}

.bbf-list li {
  margin-bottom: 5px
}

.bbf-list .bbf-del {
  margin-left: 4px
}

.testing {
  border: 1px solid red;
}


/* List.Modal */

.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}

JavaScript

$(function() {
  //Use BootstrapModal for object List editor
  Backbone.Form.editors.List.Modal.ModalAdapter = Backbone.BootstrapModal;

  //Main model definition
  var User = Backbone.Model.extend({
    schema: {
      name: {
        type: 'Text'
      },
      notes: {
        type: 'List'
      }
    }
  });

  var users = [
    new User({
      name: 'Sterling Archer',
      notes: ['Buy new turtleneck',
        'Call Woodhouse',
        'Buy booze'
      ]
    }),
    new User({
      name: 'Lana Kane',
      notes: ['Clean gun',
        'Buy ammunition',
        'Call Sterling'
      ]
    }),
    new User({
      name: 'Cheryl Tunt',
      notes: ['Hairdresser appointment',
        'New dress',
        'Pick up flowers'
      ]
    })
  ];

  //The form
  var form = new Backbone.Form({
    model: users[0]
  }).render();

  //Add it to the page
  $('#form_target').append(form.el);
  $('[data-items] > li > div > input').change(function() {
    console.log("List item was changed");
  });

  $("#btnRun").click(function() {
  
    form.setValue(users[1].toJSON());
    $('[data-items] > li:nth-child(1) > div > input')
      	.val("foobar")
        .trigger('change');

    console.log('form: ', form.el, form.fields.notes.$('input').val());
    });
});