CODEWITHSUNDEEP
javascriptjquerybackbone.js
MakuraYami
MakuraYami

Reputation: 3428

Backbonejs get view in save success handler

I've been searching for about 2 hours for this and can't find anything so ill just ask.

I'm trying out my first use of Backbonejs and I'm currently trying to do a ajax call and handle the result. I know this is probably not the kind of function models should be used for but I'm just trying it out, lurning how to use it in other situations.

var Login = Backbone.Model.extend({
    url: WEBSITE_PATH+'login',
});
var loginView = Backbone.View.extend({
    events:{
        'submit form': 'login'
    },

    login: function(e){
        e.preventDefault();
        this.model.save({
            username: $(e.currentTarget).find('#username').val(),
            password: $(e.currentTarget).find('#password').val()
          }, {
            success: this.onSuccess,
            error: this.onError
        });
    },

    onSuccess: function(model, response){
        console.log(this); //Returns Window object
        // - - - - - ^ -> I need view object in order to get the $el and show result
    }
}
$(document).ready(function(){
    var login = new Login();
    new loginView({ el: $('#loginForm'), model: login });
});

In the model object there is no refrence back to the view. I can just search the page globally to display my result but that defeats the purpose of using backbone.

Goal: do something like $(this.el).find('#result_message').html(response.message) in onSuccess

Am I looking at this the wrong way and should I be doing this diffrently or is there a way to get the view object?

Upvotes: 0

Views: 440

Answers (2)

jcreamer898
jcreamer898

Reputation: 8189

There's a few approaches to this problem...

_.bindAll...

var LoginView = Backbone.View.extend({
    events:{
        'submit form': 'login'
    },

    initialize: function() {
        _.bindAll(this, 'onSuccess');
    },

    login: function(e){
        e.preventDefault();
        this.model.save({
            username: $(e.currentTarget).find('#username').val(),
            password: $(e.currentTarget).find('#password').val()
          }, {
            success: this.onSuccess,
            error: this.onError
        });
    },

    onSuccess: function(model, response){
        console.log(this);
    }
});

_.bind...

var LoginView = Backbone.View.extend({
    events:{
        'submit form': 'login'
    },

    login: function(e){
        e.preventDefault();
        this.model.save({
            username: $(e.currentTarget).find('#username').val(),
            password: $(e.currentTarget).find('#password').val()
          }, {
            success: _.bind(this.onSuccess, this),
            error: _.bind(this.onError, this)
        });
    },

    onSuccess: function(model, response){
        console.log(this);
    }
});

Listen for the model's change event...

var LoginView = Backbone.View.extend({
    events:{
        'submit form': 'login'
    },

    initialize: function() {
        this.listenTo(this.model, 'change', this.onSuccess);
    },

    login: function(e){
        e.preventDefault();
        this.model.save({
            username: $(e.currentTarget).find('#username').val(),
            password: $(e.currentTarget).find('#password').val()
          }, {
            success: this.onSuccess,
            error: this.onError
        });
    },

    onSuccess: function(model, response){
        console.log(this);
    }
});

Any of those should do it for you!

Upvotes: 2

Magus
Magus

Reputation: 15104

You can use jQuery proxy function.

success: $.proxy(this.onSuccess, this)

Upvotes: 2

Related Questions