Question

I have a question about the way backbone handles it views.
Suppose I have the following code:

<div id="container">
   <div id="header">
   </div>
</div>

After this I change header into a backbone view.

How can I now remove that view from the header div again after I’m done with the view and add ANOTHER view to the same div?

I tried just overwriting the variable the view was stored in. This results in the view being changed to the new one…but it will have all the event handlers of the old one still attached to it.

Thanks in advance!

Answer 1

http://documentcloud.github.com/backbone/#View-setElement

This won’t automatically remove the original div – you’ll want to do that yourself somehow, but then by using setElement you’ll have the view’s element set to whatever you passed it.. and all of the events will be attached as appropriate. Then you’ll need to append that element wherever it is that it needs to go.

— Let’s try this again —-

So, first thing to keep in mind is that views reference DOM elements.. they aren’t super tightly bound. So, you can work directly with the jquery object under $el.

var containerView = new ContainerView();

var headerView = new HeaderView();
var anotherHeaderView = new AnotherHeaderView();

containerView.$el.append(headerView.$el);
containerView.$el.append(anotherHeaderView.$el);

anotherHeaderView.$el.detach();

containerView.$el.prepend(anotherHeaderView.$el);

Or you can create methods to control this for you.

var ContainerView = Backbone.View.extend({
    addView: function (view) {
        var el = view;
        if(el.$el) { //so you can pass in both dom and backbone views
            el = el.$el;
        }
        this.$el.append(el);
    }
});

Maybe setting the views by view order?

var ContainerView = Backbone.View.extend({
    initialize: function () {
        this.types = {};
    },
    addView: function (view, type) {
        var el = view;
        if(el.$el) { //so you can pass in both dom and backbone views
            el = el.$el;
        }
        this.types[type] = el;
        this.resetViews();
    },
    removeView: function (type) {
        delete this.types[type];
        this.resetViews();
    },
    resetViews: function () {
        this.$el.children().detach();
        _.each(['main_header', 'sub_header', 'sub_sub_header'], function (typekey) {
            if(this.types[typekey]) {
                this.$el.append(this.types[typekey]);
            }
        }, this);
    }
});