using another routes model in the controller in ember.js

Question

I'm having some trouble accessing the model correctly in a controller for a separate route.

Currently I have this going on...

App.CheckoutRoute = Ember.Route.extend({
model: function(){
    return this.modelFor('product');
}
});

And that's working in my template and it seems in the other properties on the controller

App.CheckoutController = Ember.ObjectController.extend({
publishable: 'pk_test_AtBneKs2kGmWkyD60ymyh5fw',

number: '',
cvc: '',
expMonth: '',
expYear: '',

errors: '',

charge: function() {
    var p = this.get('model.price');

    return p + '00';
}.property('model.price'),

actions: {
    tokenize: function() {
        //disable the submit button to prevent repeated clicks
                 $('button[type=submit]').attr("disabled", "disabled");

                 //Set Stripe Publishable Key
                 Stripe.setPublishableKey(this.get('publishable'));

                 // createToken returns immediately - the supplied callback submits the form if there are no errors
                 Stripe.createToken({
                          number: this.get('number'),
                          cvc: this.get('cvc'),
                          exp_month: this.get('expMonth'),
                          exp_year: this.get('expYear')
                      }, this.didCreateToken.bind(this));

                 return false;
    }
},

didCreateToken: function(status, response) {
    // console.log(status);
    // console.log(response);
    if(response.error) {
        $('button[type=submit]').removeAttr('disabled');
        return this.set('errors', response.error.message);
    }else{
        var form = $("#payment-form");
        // token contains id, last4, and card type
        var token = response['id'];
        // insert the token into the form so it gets submitted to the server
        form.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
        // post via ajax
        $.ajax({
            url: 'stripe/submit.php',
            type: 'post',
            data: $('#payment-form').serialize()
        })
        .done(function(data, status, xhr) {
            console.log(data);
            console.log(status);
            console.log(xhr);
        })
        .fail(function(data, status, xhr){
            console.log(data);
            console.log(status);
            console.log(xhr);
        });
    }
}
});

The problem comes to when I am trying to access the model to update it's quantity property to persist back to my parse server.

I want to do that in the done statement of the didCreateToken function but trying to get the model like normal I get an error in the console saying that it has no method get. How can I gain access to the model to be able to update and .save() the quantity property after the payment in stripe has gone though.

Also everything as far as stripe goes works just fine, I can successfully make payments and get to that done statement.

Kingpin2k Kingpin2k · Accepted Answer · 2014-03-11T04:53:03

you're just out of scope, set a reference to this or the model and use it inside the done.

didCreateToken: function(status, response) {
    var self = this;
    // console.log(status);
    // console.log(response);
    if(response.error) {
        $('button[type=submit]').removeAttr('disabled');
        return this.set('errors', response.error.message);
    }else{
        var form = $("#payment-form");
        // token contains id, last4, and card type
        var token = response['id'];
        // insert the token into the form so it gets submitted to the server
        form.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
        // post via ajax
        $.ajax({
            url: 'stripe/submit.php',
            type: 'post',
            data: $('#payment-form').serialize()
        })
        .done(function(data, status, xhr) {
            var model = self.get('model');
            console.log(data);
            console.log(status);
            console.log(xhr);
        })
        .fail(function(data, status, xhr){
            console.log(data);
            console.log(status);
            console.log(xhr);
        });
    }
}

using another routes model in the controller in ember.js

1 Answers