Backbone.js View removing and unbinding

Question

when my page opens, I call the collection and populate the view:

var pagColl = new pgCollection(e.models); 
var pagView = new pgView({collection: pagColl});

Separately (via a Datepicker), I wish to want to populate the same collection with different models and instantiate the view again.

The problem I have is how to close the original pagView and empty the pagColl before I open the new one, as this "ghost view" is creating problems for me. The variables referred to above are local variables? is it that I need to create a global pagColl and reset() this?

score 13 · Accepted Answer · edited Nov 18 '13 at 15:15

13

well there has been many discussion on this topic actually, backbone does nothing for you, you will have to do it yourself and this is what you have to take care of:

removing the view (this delegates to jQuery, and jquery removes it from the DOM)
```
// to be called from inside your view... otherwise its  `view.remove();`
this.remove();
```
this removes the view from the DOM and removes all DOM events bound to it.
removing all backbone events
```
// to be called from inside the view... otherwise it's  `view.unbind();`
this.unbind();
```
this removes all events bound to the view, if you have a certain event in your view (a button) which delegates to a function that calls this.trigger('myCustomEvent', params);

if you want some idea's on how to implement a system I suggest you read up on Derrick Bailey's blogpost on zombie views: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/.

another option

another option would be to reuse your current view, and have it re-render or append certain items in the view, bound to the collection's reset event

edited Nov 18 '13 at 15:15

brettjonesdev

2,271
1
18
23

answered Jan 31 '12 at 14:41

Sander

13,301
15
72
97

I actually used one of your other answers which was excellent. I don't think I explained my question sufficiently consise. http://stackoverflow.com/a/8275139/578667 – Joe Jan 31 '12 at 21:09
Yes that other answer is an example more or less of what i described in my botom line, the another option... bind a function to the collection.reset and change the vieuw when that reset event is triggered. Just like in the answer i gave to the question in your link where a view is updated on the "myEvent" event. – Sander Feb 01 '12 at 01:05
2

``obj.unbind()`` is an alias for ``obj.off()``. – codeape Feb 25 '13 at 12:35
How do i set el: '#bbFilter', when unbind and remove because i cant use THIS. i re-render my items , which is why i cant have EL , i can only set when i call it. Therefore i need a way for it to know what it needs to remove which EL. Thank you :) – CodeGuru Nov 17 '13 at 12:25
@User1291223 it is unclear to me what your problem exactly is, could you split it from this question, and just make a new SO question for it? preferably with a code example of your problem and what you want to create, then i can take a look at your problem. – Sander Nov 18 '13 at 11:14
"this.unbind()"; not working on my case(though I use delegate events to bind event). "this.unbind()" will work only on events bounded by "this.bind" or "this.on". "this.undelegateEvents()" works for me. – MeetMahPuppy Apr 29 '16 at 02:54

score 1 · Answer 2 · answered Jan 07 '15 at 06:01

1

I was facing the same issue. I call the view.undelegateEvents() method.

Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.

answered Jan 07 '15 at 06:01

nejib

76
3

score 0 · Answer 3 · answered Jun 21 '14 at 08:46

I use the stopListening method to solve the problem, usually I don't want to remove the entire view from the DOM.

view.stopListening();

Tell an object to stop listening to events. Either call stopListening with no arguments to have the object remove all of its registered callbacks ... or be more precise by telling it to remove just the events it's listening to on a specific object, or a specific event, or just a specific callback.

http://backbonejs.org/#Events-stopListening

score 0 · Answer 4 · answered Jun 08 '15 at 17:05

Here's one alternative I would suggest to use, by using Pub/Sub pattern.

You can set up the events bound to the View, and choose a condition for such events.

For example, PubSub.subscribe("EVENT NAME", EVENT ACTIONS, CONDITION); in the condition function, you can check if the view is still in the DOM.

i.e.

var unsubscribe = function() {
    return (this.$el.closest("body").length === 0);
};
PubSub.subscribe("addSomething",_.bind(this.addSomething, this), unsubscribe);

Then, you can invoke pub/sub via PubSub.pub("addSomething"); in other places and not to worry about duplicating actions.

Of course, there are trade-offs, but this way not seems to be that difficult.

Backbone.js View removing and unbinding

4 Answers4

Linked