Backbone.js approach

Question

I have a form (on localhost) with 2 fields:

First Name (text box) Last Name (text box)

Once the form is submitted, I need to use API - https://beta.test.com/api

The documentation says -

"POST /user will add the details to system and generates a user ID which would be returned."

After I receive user ID in response, I need to call another endpoint -

"POST /user/metadata will fetch the metadata for a previously added user."

I have to build this in backbonejs. What should be my approach? Do you have any tutorials which I can look at?

I did some code but it gave me - "Access-Control-Allow-Origin". I have checked on server and the API already has cross domain allowed for all.

Please suggest.

Answer 1

For a good example look at TODO app in backbone way.

I will also suggest you to read Backbone's documentation and view the source code. It will documented so you can find all you need there, if no look into the source.

---

Simple implementation of your form could be achieved like this:

For interaction with API and data exchange via REST create User model:

var UserModel = Backbone.Model.extend({
    urlRoot: 'your/api/path',
    default: { // this will be setted when model attributes are empty
        firstname: 'Default Name', 
        lastname: 'Default Lastname'  
    }
});

Form view which will render you form and will bind model's attributes to the form's elements:

var UserForm = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    el: '.form-container', // this will attach view to the DOM's element with 'form-container' class
    template: _.template($('#user-form').html()),
    events: {
       'submit': 'onFormSubmitted',
       // validation logic could be added here
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
    },
    onFormSubmitted: function(e) {
        e.preventDefault(); // we don't need to submit the form
        // get form elements here and setting on model
        // saving model at the end
        var firstName = this.$('input[name="firstname"]').val();
        var lastName = this.$('input[name="lastName"]').val();

        this.model.set({firstname: firstName, lastname: lastName});
        this.model.save(); // this will make POST request to your API
     }
});

And then initialize you view and pass User model.

var userForm = new UserForm({model: new UserModel()});

I have left the declaration of template for you.

---

There is a lot of staff for cross origin requests policy issues when using Backbone. Actually it's not the Backbone thing. Backbone uses $.ajax to interact with REST-full resources. So you just need to configure $.ajax. Look here.