CODEWITHSUNDEEP
javascriptbackbone.js
fbuchinger
fbuchinger

Reputation: 4514

How to add django-like Formfields to a Backbone App?

I'm developing a single-page-app in backbone.js, that uses a lot of html forms to collect user input. To save coding time, I'd like to have a FormField model/collection similar to Django's Form fields

My requirements:

Here is what my simple form field implementation might look like:

 FormField = Backbone.Model.extend({
    initialize: function (attributes, options){
        //TODO: initialize form field according to type,
        // i.e. set up correct view, validation etc.
    }
    defaults: {
        type: "TextField",
        label: "Unknown Label",
        required: false,
    }
});
FormFields = Backbone.Collection.extend({model: FormField})

MyPlugin = new PluginModel({
    //TODO: render a form with these config options within the edit view of the PluginModel
    config: FormFields([
        {type: "TextField", id:"store_name", label: "Name of Store", required: true},
        {type: "SelectField", id:"store_type", label: "Type of Store", required: true, choices: ['local','http']},
    ]),
    //runs after user "submits" form
    run: function (){
        if this.config.isValid(){

        }
    }
});

However, I ran into the following issues:

Upvotes: 2

Views: 774

Answers (3)

sebastian serrano
sebastian serrano

Reputation: 1057

You can try with backbone-forms.js https://github.com/powmedia/backbone-forms

Upvotes: 0

Jonny Buchanan
Jonny Buchanan

Reputation: 62813

I've ported Django's forms library to JavaScript as newforms - it's a pretty direct port at the moment, which can create form fields as DOM elements or HTML, but doesn't do any binding to the DOM or events yet.

I'm not familiar with Backbone.js, but if it makes the task easier, I'd be interested to hear about how it does so. I'd rather provide useful helpers which keep it open for people to set up binding as they wish rather than forcing a particular pattern of usage and reinventing a bunch of wheels in the process.

Upvotes: 2

Julien
Julien

Reputation: 9216

Not really found of using model to dictate UI elements...

Leave your model clean. Only data that goes in and out of your application through your backend. Your validation lives in your model (see backbone documentation for the validation method). Your model contains all the fields that you will show up on your view.

Now you need information on those field (what you call FormFields). They do not need to be a backbone model and they do not need to be inserted in a backbone collection. A plain javascript object and array would suffice. Add this information to your model as you extend it (array of field descriptions).

Instantiate your generic form view from your model and create the form using the field descriptions. Listen for change events on the inputs, selects, textareas and update your model. If a validation error shows up, an "error" event will be triggered on the model and you can react on your view (show the error).

Upvotes: 2

Related Questions