submitting AJAX using backbone models and collections

Question

I'm following this tutorial and trying to apply it in my simple login use case.

The simple jQuery ajax call is:

$.ajax({
    type: "POST",
    url: "/api/element/User.php",
    data: {
        req: "REQUSERSIGNIN",
        platform: "WEB",
        useremail: $('form#userSignIn #userEmail').val(),
        userpass: $('form#userSignIn #userPassword').val()
    },
    dataType: "json",
    success: function(data) {
        console.log("you've been logged in!"
    }
});

and of course this is called on:

$('form#userSignIn').submit();

My attempt at it using backbone is:

var events = _.clone(Backbone.Events);

var SigninModel = Backbone.Model.extend({
    url: '/api/element/User.php'
});

    var SignInCollection = Backbone.Collection.extend({
        model: SignInModel
    });

var SigninView = Backbone.View.extend({
    events: {
        'submit form#userSignIn': 'signIn'
    },

    initialize: function() {
        console.log('Sign in view initialized');
    },

    signIn: function(e) {
        e.preventDefault();

        // How do I pass in the data as above?

    }
});

$(document).ready(function(){
    // What do I instantiate to make it all work?
});

How do I pass the data in?

possible duplicate of [Backbone.js fetch with parameters](http://stackoverflow.com/questions/6659283/backbone-js-fetch-with-parameters) — Patrick Gunderson, Sep 17 '13 at 23:54

Meistro · Answer 1 · 2013-09-18T00:12:46.507

To kick start the whole process you need to:

var view = new SigninView({
  model: new SignInModel(),
  el: $('#some-element')
}).render();

To explain more, $('some-element') will grab some existing html on the page, ie.

<div id="some-element"></div>

Then calling render() will render the view and attach the resulting html to your el(#some-element)

Notice, you need a render method. So in your view create a render function:

render: function() {
 var json = this.model.toJSON(); // JSON representation of your model data
 var html = this.template(json); // The html of your sign in view, probably consisting of
                                 // a form and some fields
 this.$el.html(html); // Attach the html to your cached jQuery el

You will also need a template attribute as part of your SignInView. To do this you use an underscore template. In your SignInView:

template: _.template(//some html goes here)

Finally, you will need to grab the data from the form inputs

// ie. in your template you would have an input like this:
<input id="first-name" type="text" />

Then in your signInView,

var firstName = this.$('#first-name').val();
this.model.set('firstName', firstName);
this.model.save() // Calling save will delegate the AJAX call to Backbone            
                  // and send your data back as json

Thanks! But how do I pass those "data:{}" parameters via ajax in order to get the response from the server in backbone? — lorenzoid, Sep 17 '13 at 23:54
You can use `fetch`. See this post. http://stackoverflow.com/questions/15349949/force-backbone-fetch-to-always-use-post/15351548#15351548 — Dennis Rongo, Sep 18 '13 at 00:23

score 0 · Answer 2 · answered Sep 18 '13 at 00:20

call toJSON() on your model

var data = {
  user: model.toJSON(),
  req: "REQUSERSIGNIN",
  platform: "WEB",
}

Then you can proceed as usual

$.ajax({
  type: "POST",
  url: "/api/element/User.php",
  data: data,
  dataType: "json",
  success: function(data) {
    console.log("you've been logged in!"
  }
});

submitting AJAX using backbone models and collections

2 Answers2