Question

Because Backbone.js is pretty flexible, I am wondering about the best approach for certain things. Here I’m wondering if I’m supposed to build my application’s views so that ‘.render()’ and ‘.remove()’ correctly reverse each other.

At first, the way that seems cleanest is to pass the view a ID or jQuery element to attach to. If things are done this way though, calling ‘.render()’ will not correctly replace the view in the DOM, since the main element is never put back in the DOM:

App.ChromeView = Backbone.View.extend({
  render: function() {
    // Instantiate some "sub" views to handle the responsibilities of
    // their respective elements.
    this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
    this.menu = new App.NavigationView({ el: this.$("nav") });
  }
});

$(function() {
  App.chrome = new App.ChromeView({ el: $("#chrome") });
});

It seems preferable to me to set it up so that .remove() and .render() are exact opposites:

App.ChromeView = Backbone.View.extend({
  render: function() {
    this.$el.appendTo('body');
    this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
    this.menu = new App.NavigationView({ el: this.$("nav") });
  }
});

$(function() {
  App.chrome = new App.ChromeView();
});

What does the Backbone.js community say? Should .remove() and .render() be opposite sides of the same coin?

Answer 1

I prefer that render does NOT attach the view’s element to the dom. I think this promotes loose coupling, high cohesion, view re-use, and facilitates unit testing. I leave attaching the rendered element to a container up to either the router or a main “layout” type container view.

The nice thing about remove is that it works without the view having knowledge of the parent element, and thus is still loosely coupled and reusable. I definitely don’t like to put random DOM selectors from my layout HTML (#main or whatever) into my views. Definitely bad coupling there.

I will note that in certain annoying situations, some things like the chosen jQuery plugin require some code to run AFTER the element has been attached to the DOM. For these cases I usually implement a postAttach() callback in the view and try to keep the amount of code there as small as possible.