Multiple views with Ember

Question

I am researching Ember and i wanna know if it is possible to include multiple views in a single page and switch between layout templates. I've developed with AngularJS before.

I am searching for an Ember equivalent of this $route.when('/view1', ...); and <ng-include src="templates.top" />.

Here is a working fiddle for Angular. I hope someone can help me because i found little help.

Answer 1

In it's simplest form, you can use StateManager. Please see the following fiddle I created: http://jsfiddle.net/npCfF/

Javascript:

App= Ember.Application.create();

App.StateManager = Ember.StateManager.create({
    rootElement: '.tab-content',
    initialState: 'tab1', 
    //Show the location tab function
    showTab1: function(manager) {

        manager.transitionTo('tab1');
    },
    //show seleceted areas
    showTab2: function(manager) {

        manager.transitionTo('tab2');
    },
    showTab3: function(manager) {

        this.set('locationActive', 'inactive');
        this.set('areasActive', 'active');
        this.set('filterActive', 'inactive');
        this.set('childOf', 'showAreas');
        manager.transitionTo('tab3');
    },

    tab1: Ember.ViewState.create({
        route: 'tab1',
        view: Ember.View.create({ templateName: 'tab1' })
    }),
    tab2: Ember.ViewState.create({
        route: 'tab2',
        view: Ember.View.create({ templateName: 'tab2' })
    }),
    tab3: Ember.ViewState.create({
        route: 'tab3',
        view: Ember.View.create({ templateName: 'tab3' })
    })
});
​

HTML:

<script type="text/x-handlebars">
      <nav class="tab_menu">
           <span id="tab_location_result" data-show="location_result"  {{action "showTab1" target="App.StateManager"}}><i class="icon-globe"></i>Tab 1</span> | 
           <span id="tab_selected_areas" data-show="selected_areas" {{bindAttr class="MapSearch.StateManager.areasActive"}} {{action "showTab2" target="App.StateManager"}}><i class="icon-map-marker"></i>Tab 2</span> | 
           <span id="tab_filter_results" data-show="filter_results" {{bindAttr class="MapSearch.StateManager.filterActive"}} {{action "showTab3" target="App.StateManager"}}><i class="icon-filter"></i>Tab 3</span>
      </nav>
</script>
<div class="tab-content"></div>
<script type="text/x-handlebars" data-template-name="tab1">
Tab1 
</script>
<script type="text/x-handlebars" data-template-name="tab2">
Tab2
</script>
<script type="text/x-handlebars" data-template-name="tab3">
Tab3
</script>
​

Answer 2

What you're thinking of is the Ember.js router, with Handlebars.js templates on top. Here is a good guide to it, it covers everything you'll need to get started. Reading through and understanding the tutorial might take some time.