Backbone.LayoutManager: How to prepend a view?

Backbone.LayoutManager v0.6.6 docs state that:

If you wish to change append to prepend you can easily change how the View is inserted by setting a new append function.

    var ListView = Backbone.View.extend({
      beforeRender: function() {
        // Append a new ItemView into the nested <UL>.
        this.insertView("ul", new ItemView({
          // Prepend the element instead of append.
          append: function(root, child) {
            $(root).prepend(child);
          }
        }));
      }
    });

But from version v0.8.0, they have removed append alias in favor of insert. So now, if you want to prepend something, your code will become something like this:

    var ListView = Backbone.View.extend({
      beforeRender: function() {
        // Append a new ItemView into the nested <UL>.
        this.insertView("ul", new ItemView({
          // Prepend the element instead of append.
          insert: function(root, child) {
            $(root).prepend(child);
          }
        }));
      }
    });

It took me quite some time to figure this out, hope this post saves some of yours.

Published by

Umar Ashfaq

Umar Ashfaq is a full-stack web developer. His core strength is building neat UIs with JavaScript on web but he also enjoys server side Java, NodeJS and Objective C. Follow him on twitter @umarashfaq87

Leave a Reply

Your email address will not be published. Required fields are marked *