How to send values from Backbone to a CodeIgniter controller

Question

I am making a small application form using Backbone.js and CodeIgniter but I am having problem with connection to controller.

Can anyone please provide me the full code for that?

My controller name is verfylogin. I have taken username and password from the user, and I have to pass it to the controller.

$(function(){

        var Credentials = Backbone.Model.extend({});

        var LoginView = Backbone.View.extend({
          el: $("#login-form"),

          events: {
            "click #login": "login"
          },

          initialize: function(){
            var self = this;

            this.username = $("#username");
            this.password = $("#password");

            this.username.change(function(e){
              self.model.set({username: $(e.currentTarget).val()});
            });

            this.password.change(function(e){
              self.model.set({password: $(e.currentTarget).val()});
            });
          },

          login: function(){
            var username= this.model.get('username');
            var password = this.model.get('password');
            console.log(username,password);
          }
        });

        window.LoginView = new LoginView({model: new Credentials()});

score 0 · Accepted Answer · edited May 23 '17 at 10:29

First, please read the Backbone documentation, look at the examples and test them to really understand how it works. Also, take a look at the Backbone.js tag wiki page.

It's irrelevant what is used for the API (backend), Backbone communicates with the backbend through a REST API which consist of URLs.

To link a Backbone model with a endpoint URL, override the urlRoot property.

var Credentials = Backbone.Model.extend({
    // Specify the endpoint URL here
    urlRoot: "api/endpoint" // relative
    // urlRoot: "http://example.com/api/endpoint" // or absolute
});

Then, use the Backbone view's events hash to manage events within the view. Avoid manually binding jQuery events.

var LoginView = Backbone.View.extend({
    events: {
        "click #login": "login",
        "change #username": "onUsernameChange",
        "change #password": "onPasswordChange"
    },

    initialize: function() {
        // create the model here
        this.model = new Credentials();

        // cache jQuery object within the view
        this.$username = this.$("#username");
        this.$password = this.$("#password");
    },

    login: function() {
        // just call save to make a post request with the data.
        this.model.save();
    },

    onUsernameChange: function(e) {
        this.model.set({ username: this.$username.val() });
    },
    onPasswordChange: function(e) {
        this.model.set({ password: this.$password.val() });
    }
});

var loginView = new LoginView({ el: "#login-form" });

That way, the context (this) is available in the events callbacks. Avoid hard-coding the el property and prefer passing it on the initialization of a new view instance.

Handling JSON data posted to a CodeIgniter controller

Since I don't use CodeIgniter, I will refer you to other resources.

i understood that one but how can i pass it to controller of my codeigniter with this.(model.save) will it goes directly to the controller.where i need to sepcify my url. — gopi putta, Mar 16 '17 at 04:27
@gopiputta I added details on where to put the URL in the backbone model. I also added additional info on CodeIgniter, unfortunately, I don't use it so I can't provide specific help on it. — Emile Bergeron, Mar 16 '17 at 19:09

How to send values from Backbone to a CodeIgniter controller

1 Answers1

Handling JSON data posted to a CodeIgniter controller