How do I save certain ember views?
I've created tabs for the app module that have a significant amount of html tags to render. Route views are displayed every time the user changes a submodule.
example.com/module/tab
example.com/module/other-tab
example.com/module/different-tab
The user will switch between these tabs a lot I guess. In this case, I would like to continue working in the DOM. I mean hide and show transitions in that particular module instead of removing from dom and rerender. It's like google spreadsheet when you change sheets. It boots the first time and then switches immediately.
I was able to hide the displayed view when going to
App.ModuleTab = Ember.View.extend
destroy: ->
@.$().hide().addClass('module-tab')
but how can I display the hidden view instead of rendering ? Should I change the method in some way?
source to share
You probably want to implement state tabs using Ember queryParams
instead of using routes, as simply navigating a route will cause views under your route to fail module
. Ember queryParams have been in beta and Ember canaries for a while and have just landed in the official release of Ember v1.7.0 10 days ago.
For a good example / solution to implement tabs using queryParams
I would suggest looking at ic-tabs or Ember Component Project for some good examples.
If your tabs contain complex views and need separate controllers, you can achieve this by using a helper render
for each tab's content:
{{render 'module/tab-xx'}}
Amber will look for a template in the / tab -xx module and a controller with a name ModuleTabXXController
that it will create and bind to the view. See Ember Guides on Rendering Views with Helpers
You can then further conditionally highlight the render if you only want to render when the tab is visible. eg:
{{#ic-tabs selected-index=country}}
{{#ic-tab-list}}
{{#ic-tab}}Australia{{/ic-tab}}
{{#ic-tab}}United Kingdom{{/ic-tab}}
{{#ic-tab}}USA{{/ic-tab}}
{{/ic-tab-list}}
{{#ic-tab-panel}}
{{#if active}}
{{render 'country/au' auModel}}
{{/if}}
{{/ic-tab-panel}}
{{#ic-tab-panel}}
{{#if active}}
{{render 'country/uk' ukModel}}
{{/if}}
{{/ic-tab-panel}}
{{#ic-tab-panel}}
{{#if active}}
{{render 'country/us' usModel}}
{{/if}}
{{/ic-tab-panel}}
{{/ic-tabs}}
source to share
You have to override the createElement method and check if the element already exists and is hidden.
App.ModuleTab = Ember.View.extend
createElement: ->
if @get 'element'
@.$().show()
@
else @._super.createElement()
destroy: ->
@.$().hide().addClass('module-tab')
source to share