How to remove surfaces from a layout?

Question

I'm creating a lot of little surfaces that get added to a layout ( int this case a header footer layout), animated, then need to go away. However, I'm not sure how to remove the surfaces once added?

Answer 1

Kraig is right about using a RenderController when possible, but I would not suggest it for your case. RenderController works well with large layouts and not so much for small particles and such. RenderController only shows one view at a time.

I have asked about this on the IRC channel and it turns out the way I do it, feels really hacky, but is still the recommended most straight forward approach. The idea is to just redefine the render function to return null.

// surface to remove
surface.render = function(){ return null; }

That's it!

Just make sure you remove all references in your code as well!

I often do it from an object..

delete littleSurfaces['little-surface-key']

FWIW The more advanced approach is to actually define a view that controls specifically the surfaces that get rendered. You do this by defining the render function on a custom view that returns what is known as a renderSpec. A renderSpec is a list of hashes that define the surfaces that will be rendered. The example everyone points to is the Flipper class. Take a look at Flippers render function..

https://github.com/Famous/views/blob/master/Flipper.js

Good Luck!

Answer 2

You can add/remove surfaces using a RenderController object. You can also apply an optional transition when things are shown and hidden.

The DOM may lie to you sometimes, as Famo.us repurposes and recycles DOM Elements for efficiency.

https://famo.us/docs/api/latest/views/RenderController