Ember ViewState alternative - ember.js

Question

What is the alternative to Ember.ViewState that has been deprecated? I tried using Ember.State instead with ContainerView etc., but could not get the view loaded. If someone can help (preferably with any example), that will be great.
(Unable to share entire code as it is Work in Progress)
newState: Ember.State.create({
...
view: Ember.ContainerView.create({
childViews: [ Dashboard.ChartView.create() ]
}),
});
Also how to debug why a view is not rendered, especially if you want to know if your layouts and outlets are the problem? Do outlets work with StateManager? Right now, assume I have only the following in my index.html, is it enough (I am using Ember AnimatedOutlet)?
<script type="text/x-handlebars" data-template-name="application">
{{animatedOutlet name="main"}}
</script>
With the new Ember specifications, how to use outlets with StateManager without using routes? I want a single-page app with only default "/" route?
Thanks,
Paddy

Answer 1

For this sort of problem I typically create an Ember.StateManager from the now separate ember-states project. I then have computed properties on my controller that determine whether various parts of the page should be shown. Then, in my templates, I use {{#if shouldShowPartX}} ... {{\if}} type statements that are only displayed if the StateManager is in the given state. Here's a more complete example:
App.MyController = Ember.Controller.extend({
isOpen: Ember.computed.equal('panelManager.currentState.name', 'open')
init: function() {
this._super();
# Create the state manager instance from the class defined on this controller.
this.set('panelManager', this.PanelManager.create());
},
reset: (function() {
this.get('panelManager').send('reset');
}).on('init'),
PanelManager: Ember.StateManager.extend({
initialState: 'open',
open: Ember.State.create({
# If already open do nothing.
open: function(manager) {},
# Close the panel
shrink: function(manager) {
manager.transitionTo('closed');
},
}),
closed: Ember.State.create({
# If already closed, do nothing
shrink: function() {},
# Open the panel
open: function(manager) {
manager.transitionTo('open');
},
}),
reset: function(manager) {
manager.transitionTo(manager.get('initialState'));
}
})
});
Then In my view I can do something like:
{{#if isOpen}}
<div class="panel panel-open"> ... </div>
{{else}}
<div class="panel panel-closed"> ... </div>
{{/if}}
This is an admittedly simplistic example, and one wouldn't usually use a StateManager for a simple two-state situation, but a more complicated example would probably be confusing.
Would this help? It doesn't require messing directly with a ContainerView and instead relies on an implicit ContainerView that handles the {{#if}} blocks and creates views according to the state of the StateManager.