Question

I have a view in backbone and I would like to create some attributes.

I did that:

var ProgrammeDetailsView = Backbone.View.extend({

    $infoResult: $('#info-result'),
    $castingResult: $('#casting-result'),
    $broadcastResult: $('#broadcast-result'),
    $testResult: $('#test'),

[...]

And I surprisely got this result:

 console.log(this.$infoResult); -> Array { selector="#test", forEach=forEach(), reduce=reduce(), more...}

As you can see, I’ve used “this.$infoResult” which should return an object with id “#info-result” but it’s in fact the latest variable which is returned.

If I do that:

var ProgrammeDetailsView = Backbone.View.extend({

    $infoResult: '#info-result',
    $castingResult: '#casting-result',
    $broadcastResult: '#broadcast-result',
    $testResult: '#test',

I’ve got no problem, cf:

console.log(this.$infoResult); -> "#info-result"

Do you have any idea why?

Answer 1

Are you sure the elements that you are referring to are available when the object is being intialized? A lot of the time, the view that may be creating this object, or the HTML that contains it may not have already modfied the DOM, so you won’t get a reference to it.