Javascript variable showing up as undefined in Backbone

Question

At the top of my page, I grab a value of a hidden input field, store it as a variable, then try to use it in my Backbone code. But, the value shows up undefined. How can I get the value of the field first, and then initialize my backbone app?

<script>
$(document).ready(function(){

    var whitedealsToken = $('#usertoken').val();
    console.log(whitedealsToken)

    WhiteDeals.initialize();

});
</script>

EDIT: Full Backbone Code Below

window.WhiteDeals = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {},
  initialize: function() {
    new WhiteDeals.Routers.Deals();
    if (!Backbone.history.started) {
        Backbone.history.start();
        Backbone.history.started = true;
    }
  }
};

WhiteDeals.Routers.Deals = Backbone.Router.extend({

 routes: {
            "":   "index"
     },

     index: function() {
       var deals = new WhiteDeals.Collections.Deals();
       var dealsview = new WhiteDeals.Views.DealsIndex({
        el: $('#container')
       });
     }

});

WhiteDeals.Collections.Deals = Backbone.Collection.extend({

  model: WhiteDeals.Models.Deal,
  url: 'http://lvh.me:3000/api/v1/special_deals?access_token=' + whitedealsToken,
  parse: function(response) {
  return response.results;
  },
  // Overwrite the sync method to pass over the Same Origin Policy
  sync: function(method, model, options) {
     var that = this;
     var params = _.extend({
         type: 'GET',
         dataType: 'jsonp',
         url: that.url,
         processData: false
     }, options);

    return $.ajax(params);
  }

 }); // End Collection

Is it undefined when you log it, or when you try to use it for the url in the collection? — Paul Hoenecke
– Paul Hoenecke, Commented Mar 28, 2013 at 5:03
It is defined when it is logged, and undefined when using it for the url. — ac360
– ac360, Commented Mar 28, 2013 at 5:08
Are you extending your models and collections in the initialize function? Variables passed as parameters in .extend() will only contain their value at the time .extend() is called, so unless you're extending them after whitedealsToken has been set (which you shouldn't be) they won't reference it properly. — metadept
– metadept, Commented Mar 28, 2013 at 5:13
metadept, the full code has been pasted above. You can see everything being initialized properly (I think). But, after reading your comment, I'm still not sure where I define that variable to get it to stay defined when I need to use it? — ac360
– ac360, Commented Mar 28, 2013 at 5:42

kinakuta · Accepted Answer · 2013-03-28 07:02:25Z

1

You're referencing whitedealsToken in your extend call which is executing essentially as soon as the script runs. Since whitedealsToken isn't actually being assigned a value until $(document).ready, it's going to be undefined where you're trying to use it. You would need to put your .extend call inside the same $(document).ready block after you've assigned a value to the variable in question.

answered Mar 28, 2013 at 7:02

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul Hoenecke · Accepted Answer · 2013-03-28 05:17:35Z

1

When you declare a variable in a function, it is only available in the local scope. So outside of that function it does not exist.

Check out this link: http://msdn.microsoft.com/en-us/library/ie/bzt2dkta(v=vs.94).aspx

You could instead make it global:

whitedealsToken = $('#usertoken').val();  // no var keyword

Or make it a property of some other global object:

WhiteDeals.whitedealsToken = $('#usertoken').val();

Or pass it into your initialize method and do something like this:

var whitedealsToken = $('#usertoken').val();
console.log(whitedealsToken)

WhiteDeals.initialize(whitedealsToken);

This last one by itself would not fix it, you would have to do some more work to pass the token into the instantiated collection at some point.

edited Mar 28, 2013 at 5:17

answered Mar 28, 2013 at 5:12

Paul Hoenecke

5,0701 gold badge22 silver badges20 bronze badges

1 Comment

ac360 Over a year ago

Thanks Paul, but I can't get any of these to work. I've pasted my full code above.

Collectives™ on Stack Overflow

Javascript variable showing up as undefined in Backbone

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related