Proposal: use Backform.js for forms

[sfranzen]

Backform.js is a set of Backbone components and templates designed to ease the creation of (Bootstrap) forms. Since we have a lot of such forms and related template code, it could help us to simplify and cut out a lot of code.

With Backform, you create a form using a list of JS objects specifying the label and control type for each form group:

var person = new Backbone.Model({
  id: 101,
  firstName: "Martin",
  lastName: "Drapeau"
});

var fields = [{
    name: "id", // The key of the model attribute
    label: "ID", // The label to display next to the control
    control: "input", // This will be converted to InputControl and instantiated from the proper class under the Backform namespace
    disabled: true // By default controls are editable. Here we disabled it.
  }, {
    name: "firstName",
    label: "First name",
    control: "input"
  }, {
    name: "lastName",
    label: "Last name",
    control: "input",
    extraClasses: ["fancy"],
    helpMessage: "Be creative!"
  }, {
    control: "button",
    label: "Save to server"
  }];

var form = new Backform.Form({
  el: $("#form"),
  model: person,
  fields: fields, // Will get converted to a collection of Backbone.Field models
  events: {
    "submit": function(e) {
      e.preventDefault();
      this.model.save()
        .done(function(result) {
          alert("Successful!");
        })
        .fail(function(error) {
          alert(error);
        });
      return false;
    }
  }
});
form.render(); // Backform.*Control views are created for each field and rendered on screen

The required templates are automatically rendered with each input dynamically linked to a model property. All the Bootstrap form controls are available by default, but since they are just Backbone views, it is easy to extend them or add custom ones.

I'm currently working on snapper (#1432) and will have to create some new forms, so I'm going to give it a try on my repo and report back with a "real" code preview.

[MFlyer]

Hi @sfranzen ,
this seems interesting
@priyaganti ?

[sfranzen]

Wrote a mock-up of the form for creating/editing a snapper configuration file on jsfiddle, you can view it here. It doesn't have an actual model yet, but the idea is simply that the "name" property of each field is the name of one of your model's properties; so it should for example automatically fill the form when you fetch an existing model from the server.

[sfranzen]

Depends on #1455: Backform needs a more recent version of Backbone.

[sfranzen]

Submitted #1484 to update Backbone.

[FroggyFlox]

Closing this issue due to the apparent limited developer interest/time for it and as per our recent effort in reducing our JS dependencies (#2735).