I am trying to learn backbone. I understand that el is the element that is being acted on. If it isnt specified it is an empty div. I am creating a template inside my view and returning the view object. I am then rendering the view, but I dont understand why I chain el after the render function. Could someone please explain this line of code to me:

var view = new PersonView();
this.$('#family_list').children().append(view.render().el);

What is the el for? Thanks.

I am trying to learn backbone. I understand that el is the element that is being acted on. If it isnt specified it is an empty div. I am creating a template inside my view and returning the view object. I am then rendering the view, but I dont understand why I chain el after the render function. Could someone please explain this line of code to me:

var view = new PersonView();
this.$('#family_list').children().append(view.render().el);

What is the el for? Thanks.

• javascript
• jquery
• backbone.js

1 Answer 1

jQuery's .append() method expects a string of HTML or a DOM element to be appended to its calling node.

The .el property of the view is its bound DOM element. After calling view.render(), its .el DOM element property is passed into the jQuery .append() method, so jQuery .append() gets the updated (newly rendered) DOM node.

This is made possible because the .render() call must be returning this as suggested in the documentation. Its return value is therefore the view object itself¹, and from that the .el can be referenced immediately.

¹ Wikipedia: Fluent interfaces