Solution

TasksList = Backbone.View.extend({
  template: _.template([
    "<ul class='task_list'>",
      "<% items.each(function(item) { %>",
        "<%= itemTemplate(item) %>",
      "<% }); %>",
    "</ul>"
  ].join('')),

  itemTemplate: _.template(
    "<li><%= name %></li>"
  ),

  render: function() {
    var html = this.template({
      items: tasks /* a collection */,
      itemTemplate: this.itemTemplate
    });

    $(this.el).append(html);
  }
});

You can pass the template function for the partial as a parameter to the first template.

In this example, the function itemTemplate is passed onto the parameters for template().

The situation

PicturesView = Backbone.View.extend({
  events: {
    'click .next': 'showNext'
  },

  showNext: function() {
    var current = this.$(".current");
    var nextDiv = this.$(".current + div");

    if (nextDiv.length == 0) { return; }

    // Make the current one move to the left via jQuery.
    // This uses jQuery.fn.animate() that changes CSS values, then fires
    // the function supplied when it's done.
    current.animate({ left: -300, opacity: 0 }, function() {
      current.removeClass('.current');
      nextDiv.addClass('.current');
    });
  }
});

Let's say you have this innocent code that performs an animation.

One fundamental flaw here is that it assumes that .showNext() will only be called when it is not animating. When the user clicks "Next" while the animation is working, unexpected results will occur.

The solution

Buffer = {
  commands: [],

  add: function(fn) {
    // Adds a command to the buffer, and executes it if it's
    // the only command to be ran.
    var commands = this.commands;
    commands.push(fn);
    if (this.commands.length == 1) fn(next);

    // Moves onto the next command in the buffer.
    function next() {
      commands.shift();
      if (commands.length) commands[0](next);
    }
  }
};

Here's a simple buffering solution. It provides two commands:

• add(fn) which adds a given function to the buffer, and
• next() which moves onto the next command. This is passed onto the functions when they are called.

To use this, put your animations inside an anonymous function to be passed onto add(). Be sure to trigger next() when the animations are done.

Example

showNext: function() {
  var current = this.$(".current");
  var nextDiv = this.$(".current + div");

  if (nextDiv.length == 0) { return; }

  // Ensure that the animation will not happen while another
  // animation is ongoing.
  Buffer.add(function(next) {
    current.animate({ left: -300, opacity: 0 }, function() {
      current.removeClass('.current');
      nextDiv.addClass('.current');

      // Trigger the next animation.
      next();
    });
  });
}

This is our example from a while ago that has been modified to use the bufferer.

Variations

You can make the Buffer object into a class that you can instantiate. This lets you have multiple buffers as you need. This way, you can have a buffer for each view instance.

jQuery also provides a very similar function, jQuery.fn.queue(). This may be adequate for most simple animations.

The situation

This is a common occurrence if you have one giant view that takes care of the entire page. View classes may become unwieldy once they get up to 200 lines.

Solution 1: Sub views

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 may be wise to delegate some areas of the view to be the responsibility of another view.

In this example, we have a view that handles the entire application "chrome." Let's break apart some of its parts on its render() function. Notice that we're using this.$() to select elements inside the ChromeView's element itself.

App.chrome.sidebar.toggle();

App.chrome.menu.expand();

We will then be able to access the sub-views like so:

Events

App.SidebarView = Backbone.View.extend({
  toggle: function() {
    if ($(this.el).is(':visible')) {
      $(this.el).hide();
      this.trigger('collapse');    // <==
    } else {
      $(this.el).show();
      this.trigger('expand');      // <==
    }
  },
});

All Backbone objects can emit events. To maintain the separation of responsibilities of the view classes, you may have the sub-views trigger events that the parent view would need (and vice versa).

For instance, we may implement SidebarView to trigger events when the sidebar is collapsed or expanded:

App.ChromeView = Backbone.View.extend({
  render: function() {
    this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });

    this.sidebar
      .bind('collapse', this.onSidebarCollapse)
      .bind('expand',   this.onSidebarExpand);

    // ...
  }
});

And the parent view (ChromeView) may listen to them like so:

Solution

App.ChromeView = Backbone.View.extend({
  events: {
    'click button': 'onButtonClick'
  },
  render: function() {
    // Pass our own element to the other view.
    this.tabs = new App.TabView({ el: this.el });
  }
});

App.TabView = Backbone.View.extend({
  // Notice this view has its own events. They will not
  // interfere with ChromeView's events.
  events: {
    'click nav.tabs a': 'switchTab'
  },

  switchTo: function(tab) {
    // ...
  },

  hide: function() {
    // ...
  }
});

You can make 2 or more views that target the same element. This is useful when there are many controls in a view, but creating sub-views (with their scopes limited to a set of elements in the bigger view) may be too messy, or just not possible.

In this example, ChromeView will make a sub-view that shares the same element as it does.

Using delegate views

App.ChromeView = Backbone.View.extend({
  // ...

  goFullscreen: function() {
    this.tabs.hide();
  }
});

You can delegate some functionality to the sub-view. In this example, we can write the (potentially long) code for hiding tabs in the TabView, making ChromeView easier to maintain and manage.

var chrome = new App.ChromeView;
chrome.tabs.switchTo('home');

You may also provide publicly-accessible methods to TabView that will be meant to be accessed outside of ChromeView.

Variation: private delegate views

App.ChromeView = Backbone.View.extend({
  render: function() {
    this._tabs = new App.TabView({ el: this.el });
  }
});

You can also make delegate views private by design: that is, it shouldn't be used outside the parent view (ChromeView in our example).

As JavaScript lacks true private attributes, you can set prefix it with an underscore to signify that it's private and is not part of it's public interface. (This is a practice taken from Python's official style guide.)