Backbone.LayoutManager: How to prepend a view?

Umar Ashfaq
Eastros
Published in
1 min readApr 6, 2013

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.

[sourcecode language=”javascript”]
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);
}
}));
}
});
[/sourcecode]

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:

[sourcecode language=”javascript”]
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);
}
}));
}
});
[/sourcecode]

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

--

--