Backbone: rendering syntax

Question

We're using Backbone.js in one of my team's projects, and this is the first time I use it.

I've seen many times this kind of code (it's coffeescript, but clear enough I think. @ means this.)

clients_view = new Homespa.Views.Orders.Clients.SectionView(collection: @options.clients)
@$("#clients-section").html(clients_view.render().el)
clients_search_view = new Homespa.Views.Orders.Clients.SearchView
@$("#clients_search_modal").html(clients_search_view.render().el)

Isn't there a better way to do this? I would expect to just call render on my view, and then everything's good, I shouldn't have to get the html and append/replace it by hand.

Thanks for you time !

• Esailija: The view appending itself to dom would require knowledge of outer world and would break its encpsulation. You could give a .renderTo method and then client_search_view.renderto("#clients_search_modal") but the view itself should not know about "#clients_search_modal
• ksol: Oh so this is how it works with backbone ? I thought there was a way of doing this by playing with tagName and other attributes, but I guess I was wrong
• Esailija: It's not backbone specific, you can't just create elements and expect them to appear at the page. They need to be appended to elements already existing on the page. And what I'm saying is that a view should only know about the elements it owns. So the code is correct already IMO.

Answer 1

The view appending itself to the page automatically would require the view to have knowledge of outer world, knowledge of elements that it doesn't own. This is not good.

And it's not backbone specific, you cannot just create an element and expect it to appear somewhere. It always needs to be inserted on the page first.

var a = document.createElement("div"); //Don't expect this to appear as a child of #footer or something
document.getElementById("footer").appendChild(a) //Now it is, but we needed to know about #footer.

At best you could shorten the plumbing a little by making a method like .renderTo and then:

someView.renderTo( "#clients-section"); //Would call .render and append the views .el to "#clients-section" without the view having to know about it

• ksol: What you're saying makes sense and your examples too. I would have thought, though, that backbone views would be able to know where to render themselves, not by guessing, but according to its attributes, even if it is out of its world. Thanks for your details nonetheless
• Esailija: @ksol Well, that's easy enough to make yourself. Just make your method that reads the attribute and does the appending.