Backbone cannot use this.el immediately after it is defined

Question

I have a question about using variables immediately after they have been declared.

I have always tried to do things like this:

var BuzzQuizView = Backbone.View.extend({
    el: $('.buzz-quiz'),
    liveMarked: this.el.data('live-marked'),
    questionTotal: this.el.data('question-count'),
    quizId: this.el.data('quiz-id'),
    ...

Or if we take the issue away from Backbone I have always tried things like this:

var $answer = $('.answer'),
    $question = $answer.parent().parent();

But I always get an error, for the Backbone example it is:

Cannot read property 'data' of undefined

and in the case of the variables I get the error:

$answer is not defined

Why is this? I just cannot figure it out, why cant I use the variable? As I see it the variable has been declared, the code has executed so the variable should be available.

Any help would be hugely appreciated.

---- EDIT ----

So I have come that the normal JS example above using var does actually work perfectly.

What I was meant to be asking is why the same issue persists in any type of object take the following as an example:

var obj = {
    $body: $('body'),
    allDivs: $body.find('allDivs'),
    ...
}

Why is $body not available at this point?

you probably need to wait until the dom has loaded before you excecute your code. just use $(function () { }) (or $(document).ready) http://stackoverflow.com/questions/17087618/backbone-js-dom-isnt-ready-in-render-method-to-apply-jquery-magic — Rosenumber14, Jan 29 '16 at 15:46

score 2 · Accepted Answer · answered Jan 29 '16 at 15:55

2

this.el should be specified as jQuery selector string or DOM element. Not jQuery object, as in your code ($('.buzz-quiz')).

Also this.el is undefined at the moment when you pass options to Backbone.View constructor. It is only available since Backbone.View is instantiated.

So you have to initialize that properties inside Backbone.View constructor:

var BuzzQuizView = Backbone.View.extend({
    el: '.buzz-quiz',
    initialize: function() {
        this.liveMarked = this.$el.data('live-marked');
        this.questionTotal = this.$el.data('question-count');
        this.quizId = this.$el.data('quiz-id');
    }
    ...
});

answered Jan 29 '16 at 15:55

hindmost

7,125
3
27
39

Just curious, why cant el be `$('.buzz-quiz')`? then you wouldn't have to query for it 3 different times? Then wouldnt it need to be `$(this.el).data('live-marked')` if you leave it as a string? – Rosenumber14 Jan 29 '16 at 16:04
Hey, thanks for this you have helped me understand how Backbone works but can you please look at the update in my question, I would like to know why this doesn't work in any type of object. – lukehillonline Jan 29 '16 at 16:11
1

@Rosenumber14 Just due to the Backbone signature. Read [the docs](http://backbonejs.org/#View-el) – hindmost Jan 29 '16 at 16:14
Oh ok, neat! It caches it for you. – Rosenumber14 Jan 29 '16 at 16:18
2

@lukehillonline I found this (it was kind of hard to find): http://stackoverflow.com/questions/3173610/can-a-javascript-object-property-refer-to-another-property-of-the-same-object – Rosenumber14 Jan 29 '16 at 16:37
@Rosenumber14 thanks for finding that, so as I understand it, `this` is not updated as the code runs through the object, it is only at the closing of the object that `this` is completely updated? – lukehillonline Jan 29 '16 at 16:56
@lukehillonline Yeah, the object must be fully constructed before it can use its variables. – Rosenumber14 Jan 29 '16 at 17:01
@Rosenumber14 brilliant thanks for helping me understand. – lukehillonline Jan 29 '16 at 17:16

Backbone cannot use this.el immediately after it is defined

1 Answers1