Question

I have a js file named bars.js. This javascript file contains the code to display the outer structure of the page. So when I do $(‘#mainContainer’).drawBar(); (drawBar() is a function inside the Bars.js) it will draw the outside structure of my page. Now, I am using backbone.js. In the app.js I am calling the $(‘#mainContainer’).drawBar();

So drawBar() function has <table><tr class='rows_table'><td> ABC</td><td>DEF</td></tr></table> (this code resides in the bar.js)

So this will append to my ‘mainContainer’.

So now, my question is, from app.js I am not able to refer the elements like :
this.$(‘.rows_table’).css(“display”,”block”);

rather I have to call it
$(‘.rows_table’).css(“display”,”block”);. Is there a way I can bring this bar.js code in “this.$” reference?

Can i call it this.$(‘.rows_table’)?

Answer 1

The view you are calling this.$('.rows_table') from should be in-charge of the element.

Each Backbone view has an DOM element that it is in-charge of. If you don’t set the element, it is just an empty <div> that is being created by the view.

You can set the element when you create the view by setting the el element.

You will need to have a reference to the table element and then:

var tableElement = $('table')[0]; // or get the reference in a way specific to your code
var myView = new Backbone.View({
    el : tableElement
});

And now you can call this.$('.rows_table') from within the view’s methods.