0

I have an app on a tablet that uses Ember to render D3 charts on 2 different tabs, as the user navigates to each tab, Ember clears the DOM and re-renders the new DOM. This results in a performance hit - especially since D3 redraws the whole graphs.

How do I backup/cache the DOM in Ember? The backedup DOM could be re-rendered upon a didInsertElement call.

xorsi
  • 105
  • 2
  • 12

1 Answers1

2

I'm assuming you've got an outlet that changes what it renders based on which tab is active. If you don't want the DOM to be recreated every time you change tab, you can't use an outlet. Similarly, you can't use an #if-else handlebars block.

Just have the DOM for both charts in the page at the same time and use CSS to hide and show the active chart. You can wait until the second tab is clicked to render the second chart, so you're not doing it all up front.

raycohen
  • 630
  • 4
  • 7
  • Could you please add in more detail on using CSS to hide/show the active chart? No {{outlet}} is being used. – xorsi May 08 '14 at 06:33
  • @xorsi can you share some of the handlebars file that you have that defines where these charts show up so I can get a better idea of how to guide you? – raycohen May 08 '14 at 15:27